Retraso en la carga de imágenes y JavaScript en SharePoint
En el artículo se describe cómo puede reducir el tiempo de carga de las páginas de SharePoint mediante JavaScript para retrasar la carga de imágenes y también al esperar a cargar JavaScript no esencial hasta que se cargue la página.
Las imágenes pueden afectar negativamente a las velocidades de carga de página en SharePoint. De forma predeterminada, la mayoría de los exploradores de Internet modernos capturan imágenes previas al cargar una página HTML. Este proceso puede hacer que la página se cargue lentamente si las imágenes no están visibles en la pantalla hasta que el usuario se desplaza hacia abajo. Las imágenes pueden impedir que el explorador cargue la parte visible de la página. Para solucionar este problema, puede usar JavaScript para omitir primero la carga de las imágenes. Además, la carga de JavaScript no esencial también puede ralentizar los tiempos de descarga en las páginas de SharePoint. En este artículo se describen algunos métodos que puede usar para mejorar los tiempos de carga de páginas con JavaScript en SharePoint.
Mejora de los tiempos de carga de páginas retrasando la carga de imágenes en páginas de SharePoint mediante JavaScript
Puede usar JavaScript para evitar que un explorador web realice capturas previas de imágenes. Esta técnica acelera la representación general de documentos. Para ello, quite el valor del atributo src de la <etiqueta img> y reemplácelo por la ruta de acceso a un archivo en un atributo de datos como: data-src. Por ejemplo:
<img src="" data-src="/sites/NavigationBySearch/_catalogs/masterpage/media/microsoft-white-8.jpg" />
En este método, el explorador no descarga las imágenes inmediatamente. Si la imagen ya está en la ventanilla, JavaScript indica al explorador que recupere la dirección URL del atributo de datos e insérela como el valor del atributo src. La imagen solo se carga a medida que el usuario se desplaza y entra en vista.
Para realizar esta función, debe usar JavaScript.
En un archivo de texto, defina la función isElementInViewport() para comprobar si un elemento está en la parte del explorador que es visible para el usuario.
function isElementInViewport(el) {
if (!el)
return false;
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
A continuación, use isElementInViewport() en la función loadItemsInView(). La función loadItemsInView() carga todas las imágenes que tienen un valor para el atributo data-src si se encuentran en la parte del explorador que es visible para el usuario. Agregue la siguiente función al archivo de texto:
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, llame a loadItemsInView() desde window.onscroll() como se muestra en el ejemplo siguiente. Esta función garantiza que las imágenes que se encuentran en la ventanilla se carguen a medida que el usuario las necesite, pero no antes. Agregue lo siguiente al archivo de texto:
//Example of calling loadItemsInView() from within window.onscroll()
$(window).on("scroll", function () {
loadItemsInView();
});
Para SharePoint, debe adjuntar la siguiente función al evento de desplazamiento en la etiqueta div> #s4-workspace<, ya que los eventos de ventana se invalidan para asegurarse de que la cinta de opciones permanece adjunta a la parte superior de la página.
//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.
Una vez que termine de escribir delayLoadImages.js, puede agregar el contenido del archivo a una página maestra de SharePoint agregando un vínculo de script al encabezado de la página maestra. Una vez que está en una página maestra, JavaScript se aplica a todas las páginas del sitio de SharePoint que usan ese diseño de página maestra. Como alternativa, si piensa usar solo la funcionalidad en una página del sitio, use el elemento web del editor de scripts para insertar JavaScript en la página. Para obtener más información, consulte:
Ejemplo: Hacer referencia al archivo de delayLoadImages.js de JavaScript desde una página maestra en SharePoint
Para que este ejemplo funcione, también debe hacer referencia a jQuery en la página maestra. En el ejemplo siguiente, puede ver en la carga de página inicial que solo hay una imagen cargada, pero hay varias más en la página.
En la captura de pantalla siguiente se muestra el resto de las imágenes que se descargan después de desplazarse a la vista.
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 con formato regular. Esta técnica puede afectar a las clasificaciones en los motores de búsqueda porque los metadatos de la propia imagen no están allí hasta que se carga la página. Búsqueda rastreadores del motor solo leen el CÓDIGO HTML y, por tanto, no pueden ver las imágenes como contenido en la página. Las imágenes son uno de los factores que se usan para clasificar las páginas en los resultados de búsqueda. Una solución es usar texto introductorio para las imágenes.
Ejemplo de código de GitHub: Inserción de JavaScript para mejorar el rendimiento
No se pierda el artículo y el ejemplo de código sobre la inyección de JavaScript proporcionados en GitHub.
Consulte también
Exploradores admitidos en Office 2013 y Aplicaciones Microsoft 365 para empresas