Implementé Intersection Observer en mi sitio de Wordpress que está en modo desarrollador atm y solo la última imagen en la parte inferior del sitio se está cargando lentamente.

No estoy seguro de la razón por la que eso está sucediendo. Vea a continuación mi código perezoso.

 /*Lazy load images*/ const allViews = document.querySelectorAll("[data-src]"); function preloadImage(img) { const src = img.getAttribute("data-src"); if (!src) { return; } img.src = src; } const options = { root: null, threshold: 0, rootMargin: "0px", }; const callback = function (entries) { //console.log(entries); }; const observer = new IntersectionObserver((entries, observer) => { entries.forEach((entry) => { if (!entry.isIntersecting) { return; } else { console.log(entry.target); preloadImage(entry.target); observer.unobserve(entry.target); } }); }, options); allViews.forEach((image) => { observer.observe(image); });

En otro archivo, tengo un script jquery que agrega el atributo data-src a todas las imágenes y agrega la clase lazyload:

 /*change img src to img data-src for lazy load*/ $("img").each(function () { $(this).attr("data-src", $(this).attr("src")); $(this).addClass('lazyload'); //$(this).removeAttr("src"); //console.log($(this)[0].outerHTML); });

Cualquier ayuda será genial.