JS | 图片懒加载之交叉观察器IntersectionObserver API 手把手教学

IntersectionObserver API 是现代浏览器提供的一种异步观察目标元素与祖先元素（或顶级文档视窗）交叉状态的方法。它可以用于实现懒加载图片、无限滚动、以及其他需要监听元素可见性的功能。本文将详细介绍 IntersectionObserver API 的使用方法，帮助你快速掌握这一实用工具。

基本概念

在开始使用 IntersectionObserver 之前，我们需要了解几个基本概念：

目标元素（Target Element）：你想要观察的元素。
根元素（Root Element）：用来检测目标元素的可见性变化的容器元素，默认为浏览器视窗。
阈值（Threshold）：触发回调函数的目标元素可见比例。

为什么使用 IntersectionObserver

传统上，我们会使用 scroll 事件监听元素的可见性变化。然而，这种方法有几个缺点：

性能问题：滚动事件会频繁触发，从而导致性能问题。
复杂的计算：需要手动计算元素的可见性。
IntersectionObserver 可以解决这些问题：

性能更好：IntersectionObserver 是异步的，不会频繁触发。
简单易用：只需要定义一次观察逻辑，浏览器会处理所有计算。

创建 IntersectionObserver 实例

IntersectionObserver 是一个构造函数，我们需要先创建一个实例。构造函数接收两个参数：回调函数和可选配置对象。

let options = {
  root: null, // 默认为视窗
  rootMargin: '0px', // 视窗的外边距
  threshold: 0.1 // 目标元素可见比例达到 10% 时触发回调
};

let observer = new IntersectionObserver(callback, options);

定义回调函数

回调函数在目标元素的可见性变化时被调用。它接收两个参数：entries 和 observer。

let callback = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('目标元素进入视窗');
      // 在此处理进入视窗后的逻辑
    } else {
      console.log('目标元素离开视窗');
      // 在此处理离开视窗后的逻辑
    }
  });
};