JavaScript图片懒加载优化方法

InterSectionObserver

具体查看 https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver

重点：
1.observer.observe(DOM节点) 观察哪个DOM节点

2.observer.unobserve(DOM节点) 取消观察某DOM节点

3.callback目标能看见触发一次；目标元素看不见了又触发一次

完整示例代码如下：

<!doctype html>
<html lang="en">
<head>
  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  <title>Document</title>
</head>

<body>
  <div style="height: 300px;">111</div>
  <div><img data-src="http://119.23.151.157:8000/group1/M00/00/A3/dxeYNFvFlCGAMk3DAARxbok-EZg749.jpg" height="200px">
  </div>
  <div style="height: 300px;">222</div>
  <div><img data-src="http://119.23.151.157:8000/group1/M00/00/06/dxeYNFpu3OGAX4YpAAHaTjtdFHo889.jpg" height="200px">
  </div>
  <div style="height: 300px;">333</div>
  <div><img data-src="http://119.23.151.157:8000/group1/M00/00/08/dxeYNFpu3OiADGcaAAajmTEtktQ483.jpg" height="200px">
  </div>
  <div style="height: 300px;">444</div>
  <div><img data-src="http://119.23.151.157:8000/group1/M00/00/08/dxeYNFpu3OiADGcaAAajmTEtktQ483.jpg" height="200px">
  </div>
  <div style="height: 300px;">555</div>
  <div><img data-src="http://119.23.151.157:8000/group1/M00/00/08/dxeYNFpu3OiADGcaAAajmTEtktQ483.jpg" height="200px">
  </div>
  <script>

    $(function () {

      //此回调：目标能看见触发一次；目标元素看不见了又触发一次
      const callback = (entries) => {   //接收一个数组作为参数，数组每一项都和目标元素相关，比如 isIntersecting 判断目标元素是否被观察到了，又比如target属性代表该目标元素
        entries.forEach((item) => {
          //若该目标元素被观察到了
            console.log(item.intersectionRatio);
            if (item.isIntersecting) {  // 或者使用 item.intersectionRatio>0 
            const img = item.target; // 目标元素
            const data_src = img.getAttribute('data-src');
            img.setAttribute('src', data_src);
            observer.unobserve(img);  // observer.unobserve(DOM节点)  取消观察某DOM节点
          }
          console.log('触发');
        })
      }

      const observer = new IntersectionObserver(callback)
      //遍历所有img，使得所有img被观察
      let imgs = document.querySelectorAll('img')
      imgs.forEach((item) => {
        observer.observe(item) ; //observer.observe(DOM节点)  观察哪个DOM节点
      })
    });
  </script>
</body>
</html>

 

posted @ 2022-03-28 18:10  南极山  阅读(26)  评论(0)    收藏  举报