Para usar la técnica de "lazy loading" con la API Intersection Observer de JavaScript, primero debes aplicarle a tus imágenes (o cualquier otro elemento que quieras cargar de forma "lazy") una clase y quitarles el atributo "src" (o "srcset" para imágenes responsive). En su lugar, puedes usar un atributo de datos personalizado, como "data-src". Aquí hay un ejemplo:
HTML:
<img data-src="image.jpg" class="lazyload" alt="My Image" />
Luego, utiliza el siguiente script JavaScript para observar las imágenes:
JavaScript:
document.addEventListener("DOMContentLoaded", function() {
var lazyImages = [].slice.call(document.querySelectorAll("img.lazyload"));
if ("IntersectionObserver" in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove("lazyload");
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
}
});
Este código crea un nuevo IntersectionObserver que carga la imagen cuando está a punto de entrar en la vista del usuario y deja de observarla una vez se ha cargado.
Recuerda que este código no funcionará en navegadores antiguos que no soporten IntersectionObserver. Para esos casos, puedes agregar una biblioteca polyfill o bien un fallback usando el evento scroll, aunque no es lo ideal por cuestiones de rendimiento.