necesita ayuda urgentemente! Estoy tratando de agregar una función de carga diferida a mi proyecto usando javascript de vainilla, pero solo carga la primera imagen y otras imágenes permanecen borrosas y no se cargan.

Aquí está el guión:

 // Lazy loading images const imgTargets = document.querySelectorAll('img[data-src]'); const loadImg = function (entries, observer) { const [entry] = entries; if (!entry.isIntersecting) return; // Replace src with data-src entry.target.src = entry.target.dataset.src; entry.target.addEventListener('load', function () { entry.target.classList.remove('lazy-img'); }); observer.unobserve(entry.target); }; const imgObserver = new IntersectionObserver(loadImg, { root: null, threshold: 0, rootMargin: '200px', }); imgTargets.forEach(img => imgObserver.observe(img));

CÓDIGO HTML:

 <div class="popup swiper-slide swiper-slide2 first-non" style="background: transparent;"> <img class="lazy-img fetures__img" src="assets/theme/images/laz-non-legendary-1.png" data-src="assets/theme/images/non-legendary-1.png" /> </div> <div class="popup swiper-slide swiper-slide2 first-non" style="background: transparent;"> <img class="lazy-img fetures__img" src="assets/theme/images/laz-non-legendary-2.png" data-src="assets/theme/images/non-legendary-2.png" /> </div> <div class="popup swiper-slide swiper-slide2 first-non" style="background: transparent;"> <img class="lazy-img fetures__img" src="assets/theme/images/laz-non-legendary-3.png" data-src="assets/theme/images/non-legendary-3.png" /> </div>

Aquí está CSS solo para el efecto de desenfoque:

 .lazy-img { filter: blur(20px); }