实现懒加载的几种方式（三）

时间 2020-07-09

标签实现加载几种方式繁體版

原文原文链接

前两章介绍了实现实现懒加载的两种方式，下面介绍最后一种方式：经过IntersectionObserver这个新的API实现。不过该API有兼容性问题，Chrome 51+支持。具体请移步MDN查看。html

1. 实现原理

IntersectionObserver介绍

IntersectionObserver能够异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法。也就是说它能够帮助咱们去判断一个元素是否出如今视口上。这里只介绍用到的两个属性：git

IntersectionObserver.observe()：使IntersectionObserver开始监听一个目标元素；

isIntersecting属性：能够判断该元素是否出如今视口内；

实现原理

根据上面介绍的那两个属性，咱们能够遍历每一个img元素，而后监听每个元素，最后根据isIntersecting属性去判断元素是否出如今视口内，从而决定是否让它加载。github

2. 具体实现

HTML结构和CSS样式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    img {
      height: 450px;
      display: block;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <!--图片地址暂时先保存在data-src这个自定义属性上面-->
  <img data-src="./img-loop/img/1.jpg" alt="懒加载1" />
  <img data-src="./img-loop/img/2.png" alt="懒加载2" />
  <img data-src="./img-loop/img/3.jpg" alt="懒加载3" />
  <img data-src="./img-loop/img/4.jpg" alt="懒加载4" />
  <img data-src="./img-loop/img/5.jpg" alt="懒加载5" />
</body>
</html>
复制代码

JS代码

document.addEventListener("DOMContentLoaded", () => {
        if ("IntersectionObserver" in window) {
          const imgs = document.getElementsByTagName("img");
          const imageObserve = new IntersectionObserver((entries) => {
            entries.forEach((entry) => {
              // 经过该属性判断元素是否出如今视口内
              if (entry.isIntersecting) {
                // entry.target可以取得那个dom元素
                const img = entry.target;
                img.src = img.dataset.src;
                // 解除监视
                imageObserve.unobserve(img);
              }
            });
          });
          [...imgs].forEach((img) => {
            // 开启监视每个元素
            imageObserve.observe(img);
          });
        } else {
          alert("您的浏览器不支持IntersectionObserver！");
        }
      });
复制代码

效果

所有代码

3.总结

至此一共介绍了三种实现懒加载的方式，我我的比较喜欢第三种实现方式，由于它会帮助咱们自动去监听，加载完成以后能够解除监听，这样咱们就不用本身去作节流优化。可是该方法须要考虑浏览器的兼容性。浏览器