解释 Intersection Observer API 的作用和应用场景 (如图片懒加载、无限滚动)。

各位观众，晚上好！今天咱们来聊聊一个在前端界默默耕耘，但实力却不容小觑的API——Intersection Observer。 咱们的目标是：听完这场讲座，下次你再遇到图片懒加载、无限滚动这些场景，心里想到的不再是各种奇技淫巧，而是优雅的Intersection Observer。

一、 啥是Intersection Observer？

首先，咱们得明白这个API是干啥的。 简单来说，Intersection Observer 就像一个观察员，专门盯着某个元素（目标元素）与它的祖先元素（或者 viewport）的相交情况。 它能告诉你：

• 目标元素是不是进入了可视区域？
• 进入了多少？
• 什么时候进入的？
• 什么时候离开的？

听起来有点抽象？ 没关系，咱们打个比方。 你家门口有个保安（Intersection Observer），他负责观察你的车（目标元素）和马路（viewport）的关系。 他会告诉你：

• 你的车啥时候开到马路上了（进入可视区域）
• 车头露出多少在马路上了（相交比例）
• 啥时候完全开上马路了（完全进入可视区域）
• 啥时候开走了（离开可视区域）

这个保安不盯着你的车不放，只有当你的车和马路有关系的时候他才会报告。 这样就省去了你一直盯着车看的麻烦，也避免了不必要的性能损耗。

二、 Intersection Observer 的基本用法

咱们先来看看怎么用 Intersection Observer。 它的基本步骤是：

1. 创建一个 Intersection Observer 实例: 告诉它你要观察谁，以及一些配置信息。
2. 指定要观察的目标元素: 让观察者开始盯着这个元素。
3. 定义回调函数: 当目标元素与根元素相交情况发生变化时，这个函数会被执行。

// 1. 创建 Intersection Observer 实例
const observer = new IntersectionObserver(callback, options);

// 2. 指定要观察的目标元素
const target = document.querySelector('#myElement');
observer.observe(target);

// 3. 定义回调函数
function callback(entries, observer) {
  entries.forEach(entry => {
    // entry.isIntersecting  :  目标元素是否进入可视区域
    // entry.intersectionRatio :  目标元素与可视区域的相交比例
    // entry.target          :  目标元素
    // entry.time            :  相交发生的时间
    if (entry.isIntersecting) {
      console.log('元素进入可视区域了！');
      // 可以做一些事情，比如加载图片
    } else {
      console.log('元素离开可视区域了！');
      // 也可以做一些事情，比如停止动画
    }
  });
}

// 配置项
const options = {
  root: null, // 根元素，默认为 viewport
  rootMargin: '0px', // 根元素的 margin，可以用来扩大或缩小可视区域
  threshold: [0, 0.25, 0.5, 0.75, 1] // 相交比例的阈值，当相交比例达到这些值时，回调函数会被触发
};

• callback (回调函数): 这是最重要的部分。 当目标元素与根元素相交情况发生变化时，这个函数会被调用。 它接收两个参数：

  • entries: 一个 IntersectionObserverEntry 对象的数组，每个对象描述了一个目标元素的相交情况。
  • observer: IntersectionObserver 实例本身。

• options (配置项): 可以用来定制观察行为。 常见的配置项有：

  • root: 指定根元素，目标元素与根元素进行相交判断。 默认为 viewport。 如果指定了根元素，就必须是目标元素的祖先元素。
  • rootMargin: 类似于 CSS 的 margin 属性，用来扩大或缩小根元素的边界。 例如，rootMargin: '100px 0px 0px 0px' 表示根元素的顶部边界向上扩大 100px，底部、左边、右边边界不变。
  • threshold: 一个数字或数组，表示相交比例的阈值。 当目标元素与根元素的相交比例达到这些阈值时，回调函数会被触发。 例如，threshold: [0, 0.5, 1] 表示当目标元素完全离开可视区域、进入可视区域50%、完全进入可视区域时，回调函数会被触发。

三、 IntersectionObserverEntry 对象的属性

IntersectionObserverEntry 对象包含了目标元素的相交信息。 它的常用属性有：

属性	描述
time	相交发生的时间戳（毫秒）。
target	被观察的目标元素。
rootBounds	根元素的矩形信息（DOMRectReadOnly 对象）。
boundingClientRect	目标元素的矩形信息（DOMRectReadOnly 对象）。
intersectionRect	目标元素与根元素的相交矩形信息（DOMRectReadOnly 对象）。
intersectionRatio	目标元素与根元素的相交比例，取值范围为 0 到 1。 0 表示完全不相交，1 表示完全相交。
isIntersecting	布尔值，表示目标元素是否与根元素相交。

四、 Intersection Observer 的应用场景

现在，咱们来看看 Intersection Observer 在实际开发中的应用。

1. 图片懒加载 (Lazy Loading)

这是 Intersection Observer 最常见的应用场景。 传统的图片懒加载通常使用 scroll 事件监听，然后计算元素是否在可视区域内。 这种方式性能较差，因为 scroll 事件会频繁触发。

使用 Intersection Observer，可以避免频繁的事件监听，只在元素进入或离开可视区域时才执行回调函数。

<img data-src="image.jpg" alt="图片" class="lazy-load">

const lazyImages = document.querySelectorAll('.lazy-load');

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src; // 加载图片
      img.classList.remove('lazy-load'); // 移除占位符 class
      observer.unobserve(img); // 停止观察
    }
  });
});

lazyImages.forEach(img => {
  observer.observe(img);
});

这段代码做了这些事情：

• 首先，获取所有带有 .lazy-load class 的图片元素。
• 然后，创建一个 Intersection Observer 实例。
• 在回调函数中，判断图片是否进入可视区域。 如果进入，则将 data-src 属性的值赋给 src 属性，加载图片。
• 加载完成后，移除 .lazy-load class，并停止观察该图片。
• 最后，遍历所有图片，让观察者开始观察它们。

优化版本：loading="lazy"

其实现在HTML已经有了原生的懒加载方法。只需要给img标签加上 loading="lazy" 就好了。

<img src="image.jpg" loading="lazy" alt="图片">

这个属性告诉浏览器延迟加载图像，直到它们接近视口为止。 浏览器会自动处理图片的加载和显示，无需编写额外的 JavaScript 代码。当然，为了兼容，你可能仍然需要 Intersection Observer 的方案。

2. 无限滚动 (Infinite Scrolling)

无限滚动是指当用户滚动到页面底部时，自动加载更多内容。 传统的实现方式也依赖于 scroll 事件监听。

使用 Intersection Observer，可以更精确地判断用户是否滚动到页面底部，从而触发加载更多内容的操作。

<div id="content">
  <!-- 内容 -->
</div>
<div id="load-more">加载更多</div>

const loadMore = document.querySelector('#load-more');
let page = 1;

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      loadData(page++); // 加载数据
    }
  });
});

observer.observe(loadMore);

function loadData(page) {
  // 模拟加载数据
  setTimeout(() => {
    const newContent = `<div>第 ${page} 页的内容</div>`;
    document.querySelector('#content').insertAdjacentHTML('beforeend', newContent);
  }, 500);
}

这段代码做了这些事情：

• 首先，获取 #load-more 元素。 这个元素将作为触发加载更多内容的标志。
• 然后，创建一个 Intersection Observer 实例。
• 在回调函数中，判断 #load-more 元素是否进入可视区域。 如果进入，则调用 loadData 函数加载更多数据。
• 最后，让观察者开始观察 #load-more 元素。

3. 检测元素是否可见

有时候，你需要判断某个元素是否在可视区域内，以便执行一些操作。 例如，当元素进入可视区域时，播放动画；当元素离开可视区域时，停止动画。

<div id="myElement">Hello World!</div>

const element = document.querySelector('#myElement');

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      element.classList.add('active'); // 添加 active class，触发动画
    } else {
      element.classList.remove('active'); // 移除 active class，停止动画
    }
  });
});

observer.observe(element);

这段代码做了这些事情：

• 首先，获取 #myElement 元素。
• 然后，创建一个 Intersection Observer 实例。
• 在回调函数中，判断 #myElement 元素是否进入可视区域。 如果进入，则添加 active class，触发动画；否则，移除 active class，停止动画。
• 最后，让观察者开始观察 #myElement 元素。

4. 广告曝光统计

广告平台需要统计广告的曝光次数，以便进行计费。 传统的实现方式也依赖于 scroll 事件监听。

使用 Intersection Observer，可以更精确地统计广告的曝光次数，避免误判。

<div class="ad">广告</div>

const ads = document.querySelectorAll('.ad');

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('广告曝光了！');
      // 上报曝光数据
      observer.unobserve(entry.target); // 停止观察，避免重复统计
    }
  });
});

ads.forEach(ad => {
  observer.observe(ad);
});

这段代码做了这些事情：

• 首先，获取所有带有 .ad class 的广告元素。
• 然后，创建一个 Intersection Observer 实例。
• 在回调函数中，判断广告元素是否进入可视区域。 如果进入，则上报曝光数据，并停止观察该广告元素，避免重复统计。
• 最后，遍历所有广告元素，让观察者开始观察它们。

五、 停止观察 (Unobserve) 和断开连接 (Disconnect)

• observer.unobserve(target): 停止观察指定的元素。 当目标元素不再需要被观察时，应该调用这个方法，释放资源。
• observer.disconnect(): 停止观察所有元素，并断开与根元素的连接。 当不再需要使用 Intersection Observer 实例时，应该调用这个方法，释放资源。

六、 兼容性

Intersection Observer 的兼容性还是不错的，主流浏览器都支持。 但是，对于一些老旧的浏览器，可能需要使用 polyfill。

浏览器	支持情况
Chrome	支持
Firefox	支持
Safari	支持
Edge	支持
IE	不支持

可以使用 intersection-observer 这个 polyfill 来提供兼容性支持。

七、 总结

Intersection Observer 是一个强大的 API，可以用来监听元素与可视区域的相交情况。 它可以广泛应用于图片懒加载、无限滚动、元素可见性检测、广告曝光统计等场景。 相比于传统的 scroll 事件监听，Intersection Observer 具有更高的性能和更精确的判断。

希望通过今天的讲座，你对 Intersection Observer 有了更深入的了解。 下次遇到类似的需求时，不妨尝试使用它，相信你会爱上它的优雅和高效。

好了，今天的讲座就到这里。 感谢大家的收听！ 如果有什么问题，欢迎提问。