javascript - 如何正确创建 LazyLoad es6 类?
问题描述
我使用此代码延迟加载图像 - 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);
尝试使用 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);
告诉我如何做正确,我在哪里犯错?
先感谢您
解决方案
我更新了答案。更正如下:
- 在 img 元素上设置高度和宽度
- 在 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>
推荐阅读
- java - JavaFX 不适用于 IntelliJ (jdk 9)
- python - 为什么放入'if'语句时函数会自动打印
- postgresql - Docker - 无法访问 postgres 数据库
- python - datepicker 在 django 中不起作用?
- android - POST 因 Retrofit 失败(连接超时),但可与 Postman 一起使用
- node.js - Vue.js:找不到模块
- reactjs - 如何调度从 API 获取的数据?
- html - HTML colspan 和 rowspan 问题
- c++ - 我有一个字符串变量 word="APA"
- r - 在 html 报告中可视化差异