高性能图片懒加载

之前都是监听页面滚动，使用

window.addEventListener("scroll", () => {})

然后判断图片是否进入可视区域，在进行加载图片（data-src自定义属性，赋值给src属性）

这里介绍一个高性能的图片懒加载方式，浏览器原生自带的Intersection Observer API（兼容性也挺好），用于异步检测目标元素与父级或顶级元素是否产生交叉。直接上代码

　　　let observer = new IntersectionObserver(

      (entries) => {

        console.log("交叉了");

        console.log(entries);

        for (const entrie of entries) {

          if (entrie.isIntersecting) {

              const img = entrie.target;

              img.src = img.dataset.url;

              // 取消监听

              observer.unobserve(img);

          }

        }

      },

      {

        root: null,// 表示要观察的目标元素（我们这里是img），与哪个父元素产生交叉，不传或者传null，就表示根元素，即浏览器的视口。

        rootMargin: "0px 0px 0px 0px",// root的偏移量

        threshold: 0.5 //是一个0~1之间的值，表示一个触发的阈值，如果是0，只要目标元素一碰到root元素，就会触发，如果是1，表示目标元素完全进入root元素范围，才会触发。

      }

    );

　　// 获取所有的图片元素
    const imgs = document.querySelectorAll("img");
    // 遍历这些元素
    imgs.forEach((img) => {
      // 用observe方法观察这些元素
      observer.observe(img);
    });