Haces un par de años el atributo Loading en HTML tanto para imágenes como iframes se hizo un estándar en HTML, si bien se trate de un estándar en el HTML no todos los navegadores tienen el soporte nativo.
Porque si lo quieres utilizar aun necesitas de un polufill y un poco de Javascript para que funcione en todos los navegadores.
Cómo utilizar lazy-loading nativo para imágenes
Para poder utilizar el lazy-loading nativo en el HTML lo primero seria verificar si el navegador soporta la funcionalidad, en caso de no tener el soporte deberías recurrir a un script de terceros, alguna librería o una implementación propia en el caso de que necesitemos ofrecer la misma experiencia a todos los navegadores disponibles.
Para eso vamos a utilizar el siguiente script bastante sencillo para realizar la comprobación
<script>
if ("loading" in HTMLImageElement.prototype) {
console.log("El navegador soporta `lazy-loading`...");
} else {
console.log("`lazy-loading` no soportado...");
}
</script>
Si el navegador lo soporta, lo único que debemos realizar es implementar el atributo loading dentro del tag img de HTML
<img loading="lazy" src="https://webdebe.xyz/imagen.jpg" width="320" alt="" />
Si probamos este código en un navegador, y abrimos Developer Tools en la pestaña de Network veremos que las primeras son cargadas automáticamente, pero a medida que hacemos scroll por la página, el resto se va descargando poco a poco.
¿Y si mi navegador no soporta el lazy-load nativo?
Si el navegador aún no implementa este nuevo estándar, gracias a la comprobación que realizamos anteriormentes, podemos hacer que se cargue una librería externa que actúe como polyfill y permita recrear el lazy-load veamos un ejemplo:
<img data-src="image-gato1.jpg" loading="lazy" alt=".." class="lazyload" />
<img data-src="image-gato2.jpg" loading="lazy" alt=".." class="lazyload" />
<img data-src="image-gato3.jpg" loading="lazy" alt=".." class="lazyload" />
<script>
if ("loading" in HTMLImageElement.prototype) {
// Si el navegador soporta lazy-load, tomamos todas las imágenes que tienen la clase
// `lazyload`, obtenemos el valor de su atributo `data-src` y lo inyectamos en el `src`.
const images = document.querySelectorAll("img.lazyload");
images.forEach((img) => {
img.src = img.dataset.src;
});
} else {
// Importamos dinámicamente la libreria `lazysizes`
let script = document.createElement("script");
script.async = true;
script.src =
"https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.0/lazysizes.min.js";
document.body.appendChild(script);
}
</script>
En este ejemplo te habrás percatado de que en los tags img no tenemos el atributo src si no uno llamado data-src esto lo hacemos para que funcione tanto de forma nativa como para la librería lazysizes que busca la imagen dentro de ese data-atribute
Si quieres ser más fancy puedes recorrer a un import dinámico de ésta manera:
<script>
(async () => {
if ("loading" in HTMLImageElement.prototype) {
const images = document.querySelectorAll("img.lazyload");
images.forEach((img) => {
img.src = img.dataset.src;
});
} else {
// Importamos dinámicamente la libreria `lazysizes`
const lazySizesLib = await import("/lazysizes.min.js");
// Se inicia lazysizes (lee el atributo `data-src` y la clase `lazyload`)
lazySizes.init();
}
})();
</script>
Atributo loading
El atributo loading permite al navegador retrasar la carga de imáges y de iframes que están fuera de pantalla esto es una gran ayuda tanto en la experiencia del usuario como carga del servidor, hasta que el usuario haga scroll cerca de ellas. Éste atributo soporta 3 valores que veremos a continuación:
lazy: Retrasa la carga de la imagen hasta que el usuario alcanza con el scroll una distancia calculada desde el viewport.
eager: Carga la imagen inmediatamente, sin importar donde está situada o colocada en la pantalla. En resumen, no hace lazy-loading.
auto: Implementa el comportamiento por defecto del navegador para la carga de las imágenes. En resumen, poner auto es lo mismo que no poner el atributo loading.
Distancia calculada
Las imagénes que están situadas above the fold, es decir, en la vista actual sin hacer scroll son cargadas automáticamente. Las que están por debajo no se cargan hasta que el usuario llega a ellas haciendo scroll.
Esta distancia calculada depende de varios factores: El tipo de recurso (si es una imagen o un iframe con un video por ejemplo), Si está habilitado el modo lite en Chrome par Android, el tipo de conexión (3G, 4G, HSDPA,...)
¿El nuevo atributo loading solo sirve para imágenes?
El nuevo atributo no sólo sirve para el tag img de HTML. También se puede utilizar para imágenes con srcset, dentro de picture y en iframes. Aquí tienes algunos ejemplos:
<!-- Lazy-loading en imágenes con picture. Se implementa dentro de <img> como fallback. -->
<picture>
<source
media="(min-width: 40em)"
srcset="img-big.jpg 1x, img-big-hd.jpg 2x"
/>
<source srcset="img-small.jpg 1x, img-small-hd.jpg 2x" />
<img src="img-fallback.jpg" loading="lazy" />
</picture>
<!-- Lazy-loading en imágenes que tienen un srcset -->
<img
src="small.jpg"
srcset="img-large.jpg 1024w, img-medium.jpg 640w, img-small.jpg 320w"
sizes="(min-width: 36em) 33.3vw, 100vw"
loading="lazy"
/>
<!-- Lazy-loading en iframes -->
<iframe src="video-player.html" loading="lazy"></iframe>
