IntersectionObserver API - 高效监测元素可见性

当我们需要监测某个元素是否进入视口（viewport）时，传统的做法是监听 scroll 事件并不断检查元素的位置。然而，这种方法效率不高，特别是在页面有大量滚动事件时。为了解决这个问题，IntersectionObserver API 提供了一种更加高效的方式来观察元素的可见性变化。

什么是 IntersectionObserver？

IntersectionObserver 是一个用于监测元素与其祖先（通常是视口）交集变化的 API。你可以使用它来实现懒加载、无限滚动等场景，而不需要手动处理滚动事件。

基本用法

以下是 IntersectionObserver 的一个基本例子，监测图片是否进入视口并进行懒加载：

<img data-src="image.jpg" alt="Lazy loaded image" class="lazy-load">

// 定义回调函数
const observerCallback = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src; // 实际加载图片
      observer.unobserve(img); // 加载后停止观察
    }
  });
};

// 创建 IntersectionObserver 实例
const observer = new IntersectionObserver(observerCallback);

// 选择需要观察的元素
document.querySelectorAll('.lazy-load').forEach(img => observer.observe(img));

应用场景

1. 懒加载：只有当图片出现在视口中时才加载它，节省带宽。
2. 无限滚动：当用户滚动到页面底部时自动加载新内容。
3. 动画触发：当元素进入视口时触发 CSS 动画效果。

优势

• 不需要频繁监听 scroll 事件，性能更好。
• 灵活的配置项（如阈值、根元素）可满足不同需求。