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 style="background: transparent;">
<img
src="assets/theme/images/laz-non-legendary-1.png"
data-src="assets/theme/images/non-legendary-1.png" />
</div>
<div style="background: transparent;">
<img
src="assets/theme/images/laz-non-legendary-2.png"
data-src="assets/theme/images/non-legendary-2.png" />
</div>
<div style="background: transparent;">
<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);
}
CodePudding user response:
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));