NorfiPC
NorfiPC » Web » Lazy Load

Aplazar la carga de fotos e imágenes (lazy load) con Insersection



Como retrasar o posponer con JavaScript la carga de imágenes, hasta que aparezcan en pantalla (viewport), con Intersection Observer y así elevar la velocidad. Librerías disponibles y ejemplos.
Aplazar la carga de fotos e imágenes (lazy load) con Insersection
En la web móvil se usan varios métodos, para retrasar la carga de imágenes y otros objetos, hasta que el área de la página que las contiene, se muestren en la zona visible del navegador.
El formato AMP usa este sistema para aumentar al máximo la velocidad de las páginas y evitar la carga de recursos que no sean necesarios.
En otro artículo explico cómo implementar esta función usando una librería de JavaScript llamada Lazy load.
Tiene el inconveniente que requiere de la librería JQuery, la que no admite la carga asíncrona y lógicamente de por sí, retrasa la velocidad de la página.
Después de su publicación han surgido otros métodos más eficientes.



Métodos para retrasar o posponer la carga de imágenes con Lazy Load


Actualmente Google recomienda usar el método llamado Intersection Observer.
En este artículo comparto como usar dos script que permiten este método.
Uno de ellos lo hace con una librería disponible en Github y el otro es mucho más sencillo, no requiere de ningún script externo y es recomendado para paginas donde solo se necesita aplazar la carga de fotos o imágenes.



¿Cómo funciona el método de retraso de carga de imágenes o Lazy Load?


Todas las librerías de JavaScript que permiten la funcionalidad de retraso de imágenes o lazyload, funcionan de forma similar.
El navegador de forma predeterminada detecta las etiquetas IMG en el HTML y carga todas las imágenes cuya ruta aparece en la propiedad SRC.
Esta propiedad se deja vacía o se le agrega un carácter # para permitir la validación de la pagina.
La dirección de la imagen se agrega en una propiedad llamada DATA-SRC u otro nombre, de acuerdo al script empleado.
Este detecta cuando la imagen aparece en pantalla y sustituye entonces la propiedad por la habitual SCR.



Retrasar la carga de las imágenes con Lazysizes


En la página de Web.dev de Google, recomiendan el uso de la librería llamada Lazysizes, para retrasar la carga de las imágenes.
Lazysizes está disponible en Github.
Es un script que permite posponer o retrasar la carga de imágenes, marcos (iframe), widgets y otros elementos, hasta que aparezcan en el viewport del navegador.
Solo requiere de la carga de la librería JavaScript "lazysizes.min.js" de 7 KB y agregar la clase "lazyload".
Para usarla necesitamos agregar a nuestras páginas la librería anterior de la siguiente forma:
<script src="lazysizes.min.js" async=""></script>
A continuación en la etiqueta de las imágenes se debe sustituir la propiedad SRC, cuyo contenido carga el navegador automáticamente, por DATA-SRC, de la siguiente forma.
<img class="lazyload" data-src="image.jpg">
La librería además permite el uso de la propiedad SRCSET para cargar imágenes de distinto tamaño, de acuerdo al ancho del viewport del navegador.
La siguiente imagen se carga en esta página usando esta librería.
Foto de la fuente de la Plaza Vieja en la Habana, que se carga usando el método Lazy Load con la librería Lazysizes.
La fuente de la Plaza Vieja en la Habana



Otro método de implementar Lazy Load con Intersection Observer


En las páginas de este sitio, empleo otro script alterno para implementar la función de lazy load, tomado de un artículo de Imagekit.io, en el que además se recomiendan otros métodos.
El script emplea la API de Intersection Observer y es mucho más pequeño que el anterior, por lo que podemos usarlo inline, dentro de una etiqueta SCRIPT.
En este caso la etiqueta IMG se usa de la siguiente forma:
<img class="lazy" data-src="image.jpg">
El script ya comprimido es el siguiente:
<script>
document.addEventListener("DOMContentLoaded",function(){var e;if("IntersectionObserver"in window){e=document.querySelectorAll(".lazy");var n=new IntersectionObserver(function(e,t){e.forEach(function(e){if(e.isIntersecting){var t=e.target;t.src=t.dataset.src,t.classList.remove("lazy"),n.unobserve(t)}})});e.forEach(function(e){n.observe(e)})}else{var t;function r(){t&&clearTimeout(t),t=setTimeout(function(){var n=window.pageYOffset;e.forEach(function(e){e.offsetTop<window.innerHeight+n&&(e.src=e.dataset.src,e.classList.remove("lazy"))}),0==e.length&&(document.removeEventListener("scroll",r),window.removeEventListener("resize",r),window.removeEventListener("orientationChange",r))},20)}e=document.querySelectorAll(".lazy"),document.addEventListener("scroll",r),window.addEventListener("resize",r),window.addEventListener("orientationChange",r)}});
</script>



Como comprobar que las imágenes cargan usando Lazy Load


La forma más sencilla y exacta de comprobar que las imágenes solo cargan, al desplazarnos con el navegador hasta su ubicación, es usando la Consola de desarrolladores en el navegador Google Chrome.
Haz lo siguiente:
1- Carga la página con el navegador Google Chrome.
2- Abre el panel de Herramientas de desarrolladores usando la combinación de teclas Contrl + Shift + J.
3- Abre el panel Network (Red) y recarga la página.
4- Da un clic en la columna Type (Tipo) para agrupar los elementos por tipo.
5- Comprueba que solo ha cargado la imagen que usa el método tradicional.
Comprobar en la consola de Google Chrome que el navegador usa Lazy Load
Ver imagen a mayor tamaño.
6- Desplázate hacia abajo en la página y comprueba como en la lista van apareciendo el resto de las imágenes.
Otra forma de comprobar que hemos implementado el método de Lazy Load, es usando la aplicación de auditoria Lighthouse.
Ejecuta el test de Performance y consulta el resultado en Passed audits (auditorias pasadas) de "Defer offscreen images".
Resultado de Lighthouse que indica que las imágenes en la página se han cargado usando Lazy Load
Resultado de Lighthouse que indica que las imágenes en la página se han cargado usando Lazy Load



Ejemplo de imágenes que cargan usando Lazy Load


En este artículo la imagen de portada se carga de forma tradicional.
Las siguientes usan el script detallado anteriormente, para cargar solo cuando aparezcan en la pantalla del dispositivo o en el área visible del navegador.
Compruébalo.
Estatua del Caballero de Paris en la Habana Estatua del Caballero de Paris en la Habana

Bar Floridita en la Habana Vieja Bar Floridita en la Habana Vieja

Páginas relacionadas



Sígueme en las redes sociales


Página de este sitio que te sugiero hoy
 
Inicio | Mapa del sitio | Buscar | Sobre mí