实现懒加载的几种方式（三）1. 实现原理 2. 具体实现

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

1. 实现原理

IntersectionObserver介绍

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

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

isIntersecting属性：可以判断该元素是否出现在视口内；

实现原理

根据上面介绍的那两个属性，我们可以遍历每个img元素，然后监听每一个元素，最后根据isIntersecting属性去判断元素是否出现在视口内，从而决定是否让它加载。

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.总结

至此一共介绍了三种实现懒加载的方式，我个人比较喜欢第三种实现方式，因为它会帮助我们自动去监听，加载完成之后可以解除监听，这样我们就不用自己去做节流优化。但是该方法需要考虑浏览器的兼容性。