IntersectionObserver

【IntersectionObserver】是一种 JavaScript API，它的主要作用是异步监测网页中某个元素是否可见（即是否与祖先元素或视口发生交叉），以及可见的程度（交叉比例）。

具体来说，这个 API 的作用包括：

1. 可见性检测：开发者可以使用 IntersectionObserver 来检测一个元素何时进入或离开用户的视线，这对于实现懒加载图片、视频或其他资源，或者跟踪用户交互行为等场景非常有用。

2. 性能优化：通过只加载进入视口的元素或者在元素可见时才执行某些操作（如动画或数据请求），可以提高页面的加载速度和整体性能。

3. 节省资源：相比于传统的滚动事件监听等方式，IntersectionObserver 是异步的，不会阻塞浏览器主线程，从而减少了 CPU 和内存的使用。

4. 灵活的配置：开发者可以自定义阈值，当元素的可见比例达到特定值时触发回调函数，这为精细化控制提供了可能。

5. 跨浏览器兼容：虽然不是所有浏览器都原生支持该 API，但可以通过 polyfill 方式在不支持的浏览器上实现类似的功能。

以下是一个使用 IntersectionObserver 实现图片懒加载的例子：

// 获取所有需要懒加载的图片元素
const images = document.querySelectorAll('.lazy-load');

// 创建一个Intersection Observer实例
const observer = new IntersectionObserver(
  (entries, observer) => {
    entries.forEach((entry) => {
      // 如果图片元素进入视口（交叉比例大于0）
      if (entry.isIntersecting) {
        // 获取当前图片元素
        const image = entry.target;
        // 设置图片的src属性，触发图片加载
        image.src = image.dataset.src;

        // 加载完成后，不再观察该图片
        observer.unobserve(image);
      }
    });
  },
  { threshold: 0.5 },
); // 设置阈值为0.5，当图片50%进入视口时开始加载

// 开始观察所有图片元素
images.forEach((image) => {
  observer.observe(image);
});

在这个例子中：

1. 我们首先通过 document.querySelectorAll 获取所有需要懒加载的图片元素，这些元素可能具有类名 .lazy-load。

2. 然后，我们创建一个 IntersectionObserver 实例，并传入一个回调函数。这个回调函数会在任何被观察的元素的可见性发生变化时被调用。

3. 在回调函数中，我们遍历 entries 数组，检查每个元素是否已经进入视口（通过 entry.isIntersecting 判断）。

4. 如果图片元素进入视口，我们就获取该元素，从其 dataset.src 属性中取出真实的图片源地址，并设置到 src 属性上，从而触发图片的加载。

5. 图片加载完成后，我们使用 observer.unobserve(image) 停止观察该图片，因为已经没有必要再监控其可见性了。

6. 最后，我们使用 observer.observe(image) 开始观察每一个需要懒加载的图片元素。

通过这种方式，我们可以确保只有当图片进入用户视口时才开始加载，从而提高了页面的加载速度和用户体验。