原文链接：/s/vhpXEaumP…

什么是懒加载相信大家都知道，一句话概括，就是当需要出现的时候再加载。

当页面上有很多图片（即：有很多img标签）的时候，浏览器会依次执行get请求拿到每个图片的二进制流，这实际上是在消耗用户的流量和服务器带宽。而不管是pc设备还是移动端设备，屏幕大小总是有限的，无法一次性看到所有图片，那么看不到的图片就没必要加载，等滚动屏幕，img元素进入浏览器可视区域时再加载。

基本原理

那如何做到这一点呢？我们知道浏览器的

标签，是当src属性有值时，才会去加载对应的图片地址，那么我们是不是可以实时的判断img元素有没有进入可视区域。

基于这个事实，我们就可以给每张图片一个默认占位图:

<img src="占位图.png">

再设置一个自定义属性，值为真实的图片地址:

<img src="占位图.png" data-src="https://k.sinaimg.cn/n/news/transform/20171113/puY7-fynship2141885.jpg/w700d1q75cms.jpg?by=cms_fixed_width">

然后在合适的时机把data-src的值赋给src，让真实的图片显示，这就是图片懒加载的基本原理。

那什么时候是“合适的时机”呢，接着往下看。

先看看老旧的方案

js监听页面滚动

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

当img标签的顶部到可视区域顶部的距离，小于可视区域高度时，我们就认为图片进入了可视区域，画张图表示：

红色框表示浏览器可视区域，蓝色框表示图片元素

就得到类似如下代码：

window.addEventListener("scroll", () => {
  const img = document.querySelectorAll('img')
  img.forEach(img => {
    const rect = img.getBoundingClientRect();
    console.log("rect", rect);
    if (rect.top < document.body.clientHeight) {
      img.src = img.dataset.src
    }
  })
})

Element.getBoundingClientRect() 方法返回一个 DOMRect 对象，其提供了元素的大小及其相对于视口的位置。

这样虽然也能实现，但可以看到，这样需要一直在监听页面滚动，而且触发的非常频繁，非常耗费性能，为了解决这一点，还需要在另外加防抖函数。并且还要计算滚动位置，很麻烦。

新方案

Intersection Observer API

这个api是浏览器原生自带的，用于异步检测目标元素与父级或顶级元素是否产生交叉。

两个重点：

异步意味着提高性能，检测交叉意味着我们不需要再去计算滚动位置，它会直接告诉我们是不是需要加载了。

这个api的核心实现是提供了一个IntersectionObserver构造函数，这个构造函数接收两个参数：

用代码表示更好理解

let observer = new IntersectionObserver(
  () => {
    console.log('交叉了')
  },
  {
    root: null,
    rootMargin: "0px 0px 0px 0px",
    threshold: 0.5
  }
);
// 获取所有的图片元素
const imgs = document.querySelectorAll("img");
// 遍历这些元素
imgs.forEach((img) => {
  // 观察这些元素
  observer.observe(img);
});

先看第二个参数，是一个对象，有三个属性，这三个属性可以都不传，但必须传个对象，可以是空对象。

new IntersectionObserver的实例observer有个observe方法，用于观察目标元素，因为我们要观察的图片有很多，所以需要遍历。

再看第一个参数，是一个回调函数

let observer = new IntersectionObserver(
  (entries) => {
    console.log('交叉了')
    console.log(entries)
  },
  {
    root: null,
    rootMargin: "0px 0px 0px 0px",
    threshold: 0.5
  }
);
// 获取所有的图片元素
const imgs = document.querySelectorAll("img");
// 遍历这些元素
imgs.forEach((img) => {
  // 用observe方法观察这些元素
  observer.observe(img);
});

这个回调函数提供了一个entries参数，是一个数组，observer实例观察了多少个元素，这个数组就有多少项，每一项是个对象，对象中有一个isIntersecting属性，当前元素与root元素交叉时为true，否则就为false。

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.src;
        observer.unobserve(img);
      }
    }
  },
  {
    root: null,
    rootMargin: "0px 0px 0px 0px",
    threshold: 0.5
  }
);
// 获取所有的图片元素
const imgs = document.querySelectorAll("img");
// 遍历这些元素
imgs.forEach((img) => {
  // 用observe方法观察这些元素
  observer.observe(img);
});

当产生交叉时，把img的data-src赋值给src，就让真实的图片显示了，然后再通过observer实例提供的unobserve方法，取消对该元素的观察。

到这里我们的图片懒加载就完成了，这样做的好处是：

看效果

浏览器兼容性

可以看到，我们用到的IntersectionObserver构造函数，以及几个必须用的属性和方法，都是完全支持的。完全不必担心低版本浏览器。