控制视口外的图片进入视口时候再进行加载，从而提升页面初始化渲染性能和用户体验。

<img>标签形式

首先，标签通过 src 属性的 url 来加载图片，因此将需要懒加载的图片 url 添加到 data-src 属性，这样 src 为空就不会加载图片了。

1
2
3
<img
  data-src="https://img.dpm.org.cn/Uploads/Picture/2021/05/31/s60b446b015652.jpg"
/>

用Intersection Observer检测图片是否进入视口，目前不支持 IE

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
if ("IntersectionObserver" in window) {
  lazyloadImages = document.querySelectorAll(".lazy");
  var imageObserver = new IntersectionObserver(function (entries, observer) {
    entries.forEach(function (entry) {
      if (entry.isIntersecting) {
        var image = entry.target;
        image.src = image.dataset.src;
        image.classList.remove("lazy");
        imageObserver.unobserve(image);
      }
    });
  });

  lazyloadImages.forEach(function (image) {
    imageObserver.observe(image);
  });
}

background标签形式