Las imágenes son parte importante de cualquier web, por ello es importante usar técnicas para usar imágenes sin afectar a la velocidad de carga. Por ello exploraremos cómo implementar Lazy Loading para imágenes utilizando HTML y JavaScript.
Lazy-loading
Lazy-loading es una técnica de optimización web que consiste en cargar inicialmente sólo las imágenes visibles y retrasar la carga de las otras imágenes hasta que el usuario las necesite. Esto ayuda a reducir el tiempo de carga al evitar cargar imágenes innecesarias.
En resumen: Lazy Loading implica cargar las imágenes solo cuando son visibles en la pantalla del usuario, en lugar de cargar todas las imágenes de una vez al cargar la página.
Lazy Load en Navegadores Modernos
Para los navegadores modernos está disponible el atributo loading
el cual permite instruir al navegador como cargar las imágenes. Este atributo tiene dos posibles valores:
lazy
: carga la imagen justo antes de mostrarse en la pantalla.eager
: carga la imagen inmediatamente, sin importar si es visible o no.
Esta técnica funciona correctamente en: Edge 79+, Chrome 77+, Safari 16.4+, Opera 64+ entre otros. Entonces para cargar las imágenes de forma diferida sólo es necesario agregar el nuevo atributo de la siguiente manera:
<img src="photo-01.jpg" loading="lazy" width="640" height="360">
<img src="photo-02.jpg" loading="lazy" width="640" height="360">
<img src="photo-03.jpg" loading="lazy" width="640" height="360">
<img src="photo-04.jpg" loading="lazy" width="640" height="360">
Demo: https://www.kodetop.com/demo/lazy-loading/lazy-loading-native.html
Lazy Load en Navegadores antiguos
Para los navegadores que no soporten el atributo loading se puede utilizar otra técnica que consiste en cargar una imagen de guía (de poco tamaño) y luego con JavaScript detectar si la imagen se encuentra en la parte visible y recién cargarla.
HTML
Al incluir la imagen en HTML utilizaremos el atributo data-src
para incluir la imagen y en el atributo src
colocaremos una imagen de guía.
<img src="placeholder.jpg" data-src="imagen-01.jpg" width="640" height="360">
<img src="placeholder.jpg" data-src="imagen-02.jpg" width="640" height="360">
<img src="placeholder.jpg" data-src="imagen-03.jpg" width="640" height="360">
<img src="placeholder.jpg" data-src="imagen-04.jpg" width="640" height="360">
<img src="placeholder.jpg" data-src="imagen-05.jpg" width="640" height="360">
<img src="placeholder.jpg" data-src="imagen-06.jpg" width="640" height="360">
Javascript
Ahora, utilizaremos Javascript para detectar todas las imágenes que tienen el atributo data-src
y luego le asignamos el valor al atributo src
solo cuando la imagen esté en el área visible de la ventana del navegador.
document.addEventListener("DOMContentLoaded", function() {
const lazyLoad = function() {
const lazyImages = document.querySelectorAll("img[data-src]");
lazyImages.forEach(img => {
console.log(img.src, img.dataset.src);
if (img.getBoundingClientRect().top <= window.innerHeight
&& img.getBoundingClientRect().bottom >= 0
&& getComputedStyle(img).display !== 'none') {
img.src = img.dataset.src;
img.removeAttribute("data-src");
}
});
};
lazyLoad();
document.addEventListener("scroll", lazyLoad);
window.addEventListener("resize", lazyLoad);
window.addEventListener("orientationchange", lazyLoad);
});
Demo: https://www.kodetop.com/demo/lazy-loading/lazy-loading-javascript.html
Recomendaciones
- Especificar el tamaño de las imágenes, de esta manera el navegador reservará espacio en la pantalla y evitará el efecto de cambio de posición de los otros elementos al cargar la imágenes.
- Utilizar carga diferida sólo para las imágenes que esta en la mitad inferior de la pantalla, esto evitará esperar que el usuario haga alguna interacción para mostrar las imágenes iniciales.
Envíar Comentario
En este sitio los comentarios se publican previa aprobación del equipo de Kodetop. Evita los comentarios ofensivos, obscenos o publicitarios. Si deseas publicar código fuente puedes hacerlo entre las etiquedas
<pre></pre>