[英]How to create LazyLoad es6 class correctly?
I use this code to lazy load images - https://jsbin.com/bozulobina/1/edit?html,css,js,output
function lazyLoad() {
const lazyImages = document.querySelectorAll("img");
const imageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
let image = entry.target;
image.src = image.dataset.src;
image.classList.remove("lazy");
imageObserver.unobserve(image);
}
});
});
lazyImages.forEach(image => {
imageObserver.observe(image)
});
}
window.addEventListener('DOMContentLoaded', lazyLoad);
Trying to rewrite this code using Class es6 - https://jsbin.com/rejurobupa/1/edit?html,css,js,output
class LazyLoad{
constructor(imgElement){
this.imgElement = imgElement;
this.interObserver()
}
interObserver() {
const imageObserver = new IntersectionObserver((images, options) => {
images.forEach(image => {
if (image.isIntersecting) {
let imageLazy = image.target;
imageLazy.src = imageLazy.dataset.src;
imageLazy.classList.remove(this.imgElement);
imageObserver.unobserve(imageLazy);
}
});
});
lazyImages.forEach(image => imageObserver.observe(image));
}
}
const lazyImages = document.querySelectorAll("img");
const lazyLoad = new LazyLoad(lazyImages);
window.addEventListener('DOMContentLoaded', lazyLoad);
告诉我如何做正确,我在哪里犯错?
先感谢您
我更新了答案。 更正如下:
class LazyLoad{ constructor( imgClass ) { this.imgClass = imgClass; this.imgElement = document.querySelectorAll(imgClass); this.interObserver(); } interObserver() { const imageObserver = new IntersectionObserver((images, options) => { images.forEach(image => { if (image.isIntersecting) { let imageLazy = image.target; imageLazy.src = imageLazy.dataset.src; imageLazy.classList.remove(this.imgClass); imageObserver.unobserve(imageLazy); } }); }); this.imgElement.forEach(image => imageObserver.observe(image)); } } window.addEventListener('DOMContentLoaded', new LazyLoad(".lazy-img"));
img{ display: block; width:300px; height:300px; }
<:DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <img src="#" class="lazy-img" data-src="https.//placeimg:com/300/300/animals" alt=""> <img src="#" class="lazy-img" data-src="https.//placeimg:com/300/300/arch" alt=""> <img src="#" class="lazy-img" data-src="https.//placeimg:com/300/300/nature" alt=""> <img src="#" class="lazy-img" data-src="https.//placeimg:com/300/300/people" alt=""> <img src="#" class="lazy-img" data-src="https.//placeimg:com/300/300/animals" alt=""> <img src="#" class="lazy-img" data-src="https.//placeimg:com/300/300/arch" alt=""> <img src="#" class="lazy-img" data-src="https.//placeimg:com/300/300/nature" alt=""> <img src="#" class="lazy-img" data-src="https.//placeimg:com/300/300/people" alt=""> <img src="#" class="lazy-img" data-src="https.//placeimg:com/300/300/animals" alt=""> <img src="#" class="lazy-img" data-src="https.//placeimg:com/300/300/arch" alt=""> <img src="#" class="lazy-img" data-src="https.//placeimg:com/300/300/nature" alt=""> <img src="#" class="lazy-img" data-src="https.//placeimg.com/300/300/people" alt=""> </body> </html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.