方法一：IntersectionObserver

IntersectionObserver提供了一种异步观察目标元素与其祖先元素或顶级文档视口（viewport）交叉状态的方法。其祖先元素或视口被称为根（root）。

const img
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    // intersectionRatio
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});
 
observer.observe(img);

提供的方法

• observe: 开始监听一个目标元素
• disconnect: 停止监听目标
• unobserve： 停止监听特定的元素
• takeRecords：返回所有观察目标的数组

方法二：Lazy

img元素有一个loading属性，设置为lazy时浏览器会自动懒加载图片。

<img src="abc.png" loading="lazy" />