个人中心
gpt4 book ai didi

javascript - 如何正确创建 LazyLoad es6 类？

转载 作者：行者123 更新时间：2023-11-28 19:13:44 29 4
gpt4 key购买 nike

我使用此代码延迟加载图像 - 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>

关于javascript - 如何正确创建 LazyLoad es6 类？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58812689/

29 4 0
文章推荐： css - 选择时如何更改从 Material ui中选择的背景颜色？
文章推荐： javascript - 确定参数是类(A+ Promise 实现)还是可调用函数
文章推荐： python - pdb 中是否可能存在嵌套断点——如果不能，是什么阻止了它们？
文章推荐： javascript - IOS-Chrome : While scrolling screen getting freezed
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com