请解释如何使用 Intersection Observer API 实现懒加载？

推荐答案

// www.javascriptcn.com code example
// 1. 创建 Intersection Observer 实例
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 2. 当目标元素进入视口时，加载图片
      const img = entry.target;
      img.src = img.dataset.src;
      // 3. 停止观察该元素
      observer.unobserve(img);
    }
  });
});

// 4. 获取所有需要懒加载的图片元素
const images = document.querySelectorAll('img[data-src]');

// 5. 开始观察每个图片元素
images.forEach(img => {
  observer.observe(img);
});

本题详细解读

1. 创建 Intersection Observer 实例

IntersectionObserver 是一个用于异步观察目标元素与祖先元素或顶级文档视口交叉状态的 API。通过创建一个 IntersectionObserver 实例，可以指定一个回调函数，当目标元素进入或离开视口时，该回调函数会被触发。

2. 当目标元素进入视口时，加载图片

在回调函数中，entries 参数是一个数组，包含了所有被观察的元素的状态信息。通过 entry.isIntersecting 可以判断目标元素是否进入了视口。如果进入了视口，则将 data-src 属性的值赋给 src 属性，从而触发图片的加载。

3. 停止观察该元素

一旦图片加载完成，就不再需要继续观察该元素，因此调用 observer.unobserve(img) 来停止观察该元素，以减少不必要的性能开销。

4. 获取所有需要懒加载的图片元素

使用 document.querySelectorAll 方法获取所有带有 data-src 属性的图片元素。这些图片元素在初始状态下不会加载图片，只有当它们进入视口时才会加载。

5. 开始观察每个图片元素

通过 observer.observe(img) 方法，将每个图片元素添加到观察列表中。这样，当这些图片元素进入视口时，就会触发回调函数，从而实现懒加载的效果。

通过以上步骤，可以有效地实现图片的懒加载，减少页面初始加载时的资源消耗，提升页面性能。