miércoles, 14 de noviembre de 2018
¿Que es el Lazy loading?

¿Que es el Lazy loading?

En termino para tontos no es más que la carga de un elemento en el momento que lo necesitas, podemos dar terminos científicos de carga diferida de elementos no críticos etc pero es un rollo.

Un ejemplo, si usas muchas imgágenes en tu sitio web evidentemente los tiempos de carga seran alto dado que tendrías que esperar a que se carguen todos los elementos, pues bien con lazy load simplemente vas cargando las imágenes a medida que las vas mostrando.

Hay librerias js que hacen el curro por ti, pero si quieres hacer uno muy simple aqui te dejo un pequeño código para que lo uses,


 

<img class="-img-lazy" src="" data-src="tuimage.jpg" data-srcset="tuimage.jpg" alt="Is Trhowable">

var lazyImages = [].slice.call(document.querySelectorAll("img-lazy"));

if ("IntersectionObserver" in window

&& "IntersectionObserverEntry" in window

&& "intersectionRatio" in window.IntersectionObserverEntry.prototype) {

let lazyImageObserver = new IntersectionObserver(function(entries) {

entries.forEach(function(entry) {

if (entry.isIntersecting) {

let lazyImage = entry.target;

lazyImage.src = lazyImage.dataset.src;

lazyImage.srcset = lazyImage.dataset.srcset;

lazyImage.classList.remove("img-lazy");

lazyImageObserver.unobserve(lazyImage);

}

});

});

 

lazyImages.forEach(function(lazyImage) {

lazyImageObserver.observe(lazyImage);

});

}

Antes de comentaros lo que he hecho deciros que si vais a usar este código antes tened encuenta que el IntersectionObserverEntry Solo funciona en navegadores modernos y en safari tengo mis dudas, mas adelante pondre una versión que use scroll y resize en lugar de IntersectionObserverEntry

Pues bien, aqui basicamente lo que hacemos es guardar un array con los nodos img, comprobar que entran dentro de la ventana del navegador y en cuanto entra cambiamos el src de la imagen, y luego eliminamos la clase para dejar de observar ese elmento, mi consejo es que si no os suena el IntersectionObserverEntry     os lo estudiéis porque es muy interesante y eso llegó para resolver muchos problemas sobre todo el scroll y rezise,

aqui os dejo un post muy interesante.

IntersectionObserver

1 Respuestas

ANGEL P Dice :
Gracias

Muchas gracias por compartir tu código, me biene bien porque estoy desarrollando una web y queria implementar el lazyload img y video, creo que con esto me puede valer.

Gracias