Retrasar la carga de imágenes y JavaScript en SharePoint OnlineDelay loading images and JavaScript in SharePoint Online

En este artículo se describe cómo puede reducir el tiempo de carga de las páginas de SharePoint Online mediante JavaScript para retrasar la carga de imágenes y esperar a cargar JavaScript no esencial hasta después de que se cargue la página.This article describes how you can decrease the load time for SharePoint Online pages by using JavaScript to delay loading images and also by waiting to load non-essential JavaScript until after the page loads.

Las imágenes pueden afectar negativamente a las velocidades de carga de página en SharePoint Online.Images can negatively affect page load speeds on SharePoint Online. De forma predeterminada, la mayoría de los exploradores de Internet modernos capturan previamente imágenes al cargar una página HTML.By default, most modern Internet browsers pre-fetch images when loading an HTML page. Esto puede hacer que la página se cargue innecesariamente lentamente si las imágenes no están visibles en la pantalla hasta que el usuario se desplaza hacia abajo.This can cause the page to be unnecessarily slow to load if the images are not visible on the screen until the user scrolls down. Las imágenes pueden impedir que el explorador cargue la parte visible de la página.The images can block the browser from loading the visible part of the page. Para solucionar este problema, puede usar JavaScript para omitir la carga de las imágenes en primer lugar.To work around this problem, you can use JavaScript to skip loading the images first. Además, la carga de JavaScript no esencial también puede ralentizar los tiempos de descarga en las páginas de SharePoint.Also, loading non-essential JavaScript can slow download times on your SharePoint pages too. En este tema se describen algunos métodos que puede usar para mejorar los tiempos de carga de página con JavaScript en SharePoint Online.This topic describes some methods you can use to improve page load times with JavaScript in SharePoint Online.

Mejorar los tiempos de carga de página retrasando la carga de imágenes en páginas de SharePoint Online mediante JavaScriptImprove page load times by delaying image loading in SharePoint Online pages by using JavaScript

Puede usar JavaScript para evitar que un explorador web obtenga imágenes previamente.You can use JavaScript to prevent a web browser from pre-fetching images. Esto acelera la representación general de documentos.This speeds up overall document rendering. Para ello, se quita el valor del atributo src de la etiqueta y se reemplaza por la ruta de acceso a un archivo en un atributo de datos <img> como: data-src.To do this you remove the value of the src attribute from the <img> tag and replace it with the path to a file in a data attribute such as: data-src. Por ejemplo:For example:

<img src="" data-src="/sites/NavigationBySearch/_catalogs/masterpage/media/microsoft-white-8.jpg" />

Al usar este método, el explorador no descarga las imágenes inmediatamente.By using this method, the browser doesn't download the images immediately. Si la imagen ya está en la ventanilla, JavaScript indica al explorador que recupere la dirección URL del atributo data e insértela como el valor del atributo src.If the image is already in the viewport, JavaScript tells the browser to retrieve the URL from the data attribute and insert it as the value for the src attribute. La imagen solo se carga a medida que el usuario se desplaza y entra en vista.The image only loads as the user scrolls and it comes into view.

Para que todo esto suceda, tendrás que usar JavaScript.To make all of this happen, you'll need to use JavaScript.

En un archivo de texto, defina la función isElementInViewport() para comprobar si un elemento está o no en la parte del explorador que es visible para el usuario.In a text file, define the isElementInViewport() function to check whether or not an element is in the part of the browser that is visible to the user.

function isElementInViewport(el) {
  if (!el)
    return false;
  var rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &amp;&amp;
    rect.left >= 0 &amp;&amp;
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &amp;&amp;
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

A continuación, use isElementInViewport() en la función loadItemsInView().Next, use isElementInViewport() in the loadItemsInView() function. La función loadItemsInView() cargará todas las imágenes que tengan un valor para el atributo data-src si están en la parte del explorador que está visible para el usuario.The loadItemsInView() function will load all images that have a value for the data-src attribute if they are in the part of the browser that is visible to the user. Agregue la siguiente función al archivo de texto:Add the following function to the text file:

function loadItemsInView() {
  //Select elements by the row id.
  $("#row [data-src]").each(function () {
      var isVisible = isElementInViewport(this);
      if (isVisible) {
          if ($(this).attr("src") == undefined) {
              $(this).attr("src", $(this).data("src"));
          }
      }
  });
}

Por último, llama a loadItemsInView() desde dentro de window.onscroll() como se muestra en el ejemplo siguiente.Finally, call loadItemsInView() from within window.onscroll() as shown in the following example. Esto garantiza que las imágenes que están en la ventanilla se carguen cuando el usuario las necesite, pero no antes.This ensures that any images that are in the viewport are loaded as the user needs them, but not before. Agregue lo siguiente al archivo de texto:Add the following to the text file:

//Example of calling loadItemsInView() from within window.onscroll()
$(window).on("scroll", function () {
    loadItemsInView();
});

Para SharePoint Online, debe adjuntar la siguiente función al evento de desplazamiento en la etiqueta #s4 área de <div> trabajo.For SharePoint Online, you need to attach the following function to the scroll event on the #s4-workspace <div> tag. Esto se debe a que los eventos de ventana se invalidan para garantizar que la cinta de opciones permanece adjunta a la parte superior de la página.This is because the window events are overridden in order to ensure the ribbon remains attached to the top of the page.

//Keep the ribbon at the top of the page
$('#s4-workspace').on("scroll", function () {
    loadItemsInView();
});

Guarde el archivo de texto como un archivo JavaScript con la extensión .js, por ejemplo, delayLoadImages.js.Save the text file as a JavaScript file with the extension .js, for example delayLoadImages.js.

Una vez que haya terminado de escribir delayLoadImages.js, puede agregar el contenido del archivo a una página maestra en SharePoint Online.Once you've finished writing delayLoadImages.js, you can add the contents of the file to a master page in SharePoint Online. Para ello, agregue un vínculo de script al encabezado de la página maestra.You do this by adding a script link to the header in the master page. Una vez que esté en una página maestra, JavaScript se aplicará a todas las páginas del sitio de SharePoint Online que usen ese diseño de página maestra.Once it's in a master page, the JavaScript will be applied to all pages in your SharePoint Online site that use that master page layout. Como alternativa, si solo desea usarlo en una página del sitio, use el elemento web editor de scripts para insertar JavaScript en la página.Alternatively, if you intend to only use this on one page of your site, use the script editor Web Part to embed the JavaScript into the page. Vea estos temas para obtener más información:See these topics for more information:

Ejemplo: referencia al archivo de delayLoadImages.js JavaScript desde una página maestra en SharePoint OnlineExample: Referencing the JavaScript delayLoadImages.js file from a master page in SharePoint Online

Para que esto funcione, también debe hacer referencia a jQuery en la página maestra.In order for this to work, you also need to reference jQuery in the master page. En el siguiente ejemplo, puede ver en la carga de página inicial que solo hay una imagen cargada, pero hay varias más en la página.In the following example, you can see in the initial page load that there is only one image loaded but there are several more on the page.

Captura de pantalla que muestra una imagen cargada en la página

La siguiente captura de pantalla muestra el resto de las imágenes que se descargan después de desplazarse a la vista.The following screenshot shows the rest of the images that are downloaded after they scroll into view.

Captura de pantalla que muestra varias imágenes cargadas en la página

Retrasar la carga de imágenes mediante JavaScript puede ser una técnica eficaz para aumentar el rendimiento; sin embargo, si la técnica se aplica en un sitio web público, los motores de búsqueda no podrán rastrear las imágenes de la misma manera que rastrearían una imagen formada regularmente.Delaying image loading by using JavaScript can be an effective technique in increasing performance; however, if the technique is applied on a public website then search engines are not able to crawl the images in the same way they would crawl a regularly formed image. Esto puede afectar a las clasificaciones de los motores de búsqueda porque los metadatos de la imagen en sí no están realmente allí hasta que se carga la página.This can affect rankings on search engines because metadata on the image itself is not really there until the page loads. Los rastreadores del motor de búsqueda solo leen el CÓDIGO HTML y, por lo tanto, no verán las imágenes como contenido en la página.Search engine crawlers only read the HTML and therefore will not see the images as content on the page. Las imágenes son uno de los factores que se usan para clasificar las páginas en los resultados de búsqueda.Images are one of the factors used to rank pages in search results. Una forma de evitar esto es usar texto introductorio para las imágenes.One way to work around this is to use introductory text for your images.

Ejemplo de código de GitHub: insertar JavaScript para mejorar el rendimientoGitHub code sample: Injecting JavaScript to improve performance

No se pierda el artículo y el ejemplo de código sobre la inyección de JavaScript proporcionado en GitHub.Don't miss the article and code sample on JavaScript injection provided on GitHub.

Vea tambiénSee also

Exploradores compatibles en Office 2013 y Aplicaciones de Microsoft 365 para empresasSupported browsers in Office 2013 and Microsoft 365 Apps for enterprise

Aplicar una página maestra a un sitio de SharePoint 2013How to: Apply a master page to a site in SharePoint 2013

Cómo crear un diseño de página en SharePoint 2013How to: Create a page layout in SharePoint 2013