need help badly! I’m trying to add a lazy load feature to my project using vanilla javascript but it only loads the first image and other images remain blurred and not loading.
Here is script:
// 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));
HTML CODE:
<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>
Here’s CSS just for blur effect:
.lazy-img { filter: blur(20px); }
Advertisement
Answer
Image src
entry.target.src = entry.target.dataset.src.replace("w=10&", "w=800&");
Control threshold based on need
threshold: 0.2
Script Code
// 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.replace("w=10&", "w=800&"); entry.target.addEventListener('load', function () { entry.target.classList.remove('lazy-img'); }); observer.unobserve(entry.target); }; const imgObserver = new IntersectionObserver(loadImg, { root: null, threshold: 0.2, rootMargin: '200px', }); imgTargets.forEach(img => imgObserver.observe(img));