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('目标元素离开视窗');
      // 在此处理离开视窗后的逻辑
    }
  });
};

观察目标元素

创建 IntersectionObserver 实例后，使用 observe 方法开始观察目标元素。

let target = document.querySelector('.target-element');
observer.observe(target);

停止观察

如果不再需要观察某个元素，可以使用 unobserve 方法。

observer.unobserve(target);

当不再需要 IntersectionObserver 实例时，可以调用 disconnect 方法停止观察所有目标元素。

observer.disconnect();

完整示例

以下是一个完整的示例，展示如何使用 IntersectionObserver API 实现懒加载图片。

• HTML 部分：

<div class="container">
  <img data-src="image1.jpg" class="lazy-load" alt="Lazy Loaded Image 1">
  <img data-src="image2.jpg" class="lazy-load" alt="Lazy Loaded Image 2">
  <img data-src="image3.jpg" class="lazy-load" alt="Lazy Loaded Image 3">
</div>

• CSS 部分：

.lazy-load {
  opacity: 0;
  transition: opacity 0.5s;
}
.lazy-load.loaded {
  opacity: 1;
}

• JavaScript 部分：

document.addEventListener('DOMContentLoaded', () => {
  let lazyImages = document.querySelectorAll('.lazy-load');

  let lazyLoadCallback = (entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        let img = entry.target;
        img.src = img.dataset.src;
        img.onload = () => {
          img.classList.add('loaded');
        };
        observer.unobserve(img);
      }
    });
  };

  let observer = new IntersectionObserver(lazyLoadCallback, {
    root: null,
    rootMargin: '0px',
    threshold: 0.1
  });

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

更多示例和用法

示例一：无限滚动加载更多内容

• HTML 部分：

<div class="content">
  <div class="item">内容1</div>
  <div class="item">内容2</div>
  <!-- 更多内容 -->
</div>
<div class="loading">加载中...</div>

• JavaScript 部分：

document.addEventListener('DOMContentLoaded', () => {
  let loading = document.querySelector('.loading');

  let loadMoreContent = (entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        // 模拟加载更多内容
        for (let i = 0; i < 10; i++) {
          let newItem = document.createElement('div');
          newItem.className = 'item';
          newItem.textContent = `新内容${i + 1}`;
          document.querySelector('.content').appendChild(newItem);
        }
        observer.unobserve(entry.target); // 停止观察当前的 loading 元素
        observer.observe(document.querySelector('.loading')); // 继续观察新的 loading 元素
      }
    });
  };

  let observer = new IntersectionObserver(loadMoreContent, {
    root: null,
    rootMargin: '0px',
    threshold: 1.0 // 目标元素完全可见时触发回调
  });

  observer.observe(loading);
});

示例二：元素进入视窗时添加动画

• HTML 部分：

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

• CSS 部分：

.box {
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 0.5s, transform 0.5s;
}
.box.visible {
  opacity: 1;
  transform: translateY(0);
}

• JavaScript 部分：

document.addEventListener('DOMContentLoaded', () => {
  // intersectionObserver 交叉观察 ： 目标元素和可视窗口会产生交叉区域
  let boxes = document.querySelectorAll('.box');
  // callback 接收的参数为带有监听所有图片交叉属性的集合
  let animateBoxes = (entries, observer) => {
    // console.log("视图交叉时触发，离开交叉时也触发", entries);
    entries.forEach(entry => {
      // 判断是否在视野区域
      if (entry.isIntersecting) {
        entry.target.classList.add('visible');
        // 取消观察追踪，避免重复加载同一张图片
        observer.unobserve(entry.target); // 动画完成后停止观察
      }
    });
  };
  // 1 创建视觉交叉的观察实例
  let observer = new IntersectionObserver(animateBoxes, {
    root: null,
    rootMargin: '0px',
    threshold: 0.1
  });
  // 2 给每一个图片绑定观察方法
  boxes.forEach(box => {
    // 图片进入视野+离开视野时触发 - 回调
    observer.observe(box);
  });
});

结论

IntersectionObserver API 是一个强大的工具，它能轻松实现懒加载、无限滚动，以及其他需要监听元素可见性的功能。通过本教程，你应该已经学会了如何创建 IntersectionObserver 实例、定义回调函数、观察和停止观察目标元素。如果你在项目中需要优化页面性能或实现动态内容加载，那么 IntersectionObserver 绝对是一个值得尝试的技术。

小结补充：IntersectionObserver“标准”

IntersectionObserver是一个用于监测元素是否进入或离开视窗的JavaScript API。它可以帮助开发者实现懒加载、无限滚动、可视化埋点等功能。该API通过观察目标元素与其祖先元素或视窗的交叉区域来触发回调函数，从而实现对元素可见性的监测。

IntersectionObserver的工作原理是通过注册一个回调函数来观察特定元素的交叉状态变化。当满足特定条件（如元素进入视窗）时，回调函数被触发执行相应的操作。这个API是异步的，不会随着目标元素的滚动同步触发，从而提高了性能和效率‌。
 

IntersectionObserver的常见用途包括懒加载图片、实现无限滚动等。通过监听元素的可见性变化，可以实现一些交互效果和性能优化，如减少不必要的资源加载，提高页面性能和用户体验‌。

IntersectionObserver的主要优势包括：

1. 性能优化：相比传统的监听滚动事件或定时器轮询，IntersectionObserver可以更高效地监听元素的可见性变化，减少了不必要的计算和事件触发，从而提升页面性能和用户体验。
2. 精确度高：IntersectionObserver可以精确地计算元素与视窗或祖先元素的交叉区域，而不仅仅是判断元素是否完全进入或离开视窗。这使得开发者可以更灵活地根据元素的可见程度来执行相应的操作。
3. 异步执行：IntersectionObserver的回调函数是异步执行的，不会阻塞主线程，从而避免了页面卡顿的问题。

IntersectionObserver的应用场景包括但不限于：

1. 图片懒加载：可以通过IntersectionObserver来监测图片元素是否进入视窗，从而实现图片的懒加载，减少页面的加载时间。
2. 无限滚动：可以通过IntersectionObserver来监测滚动容器中最后一个元素是否进入视窗，从而触发加载更多内容的操作，实现无限滚动效果。
3. 可视化埋点：可以通过IntersectionObserver来监测特定元素是否进入视窗，从而触发埋点事件，统计用户的行为数据。

---

番外：关于 scroll 事件监听

在JavaScript中，可以使用addEventListener方法为元素添加scroll事件监听器。以下是一个简单的例子，展示了如何为页面的滚动事件添加监听器，并在控制台输出滚动事件发生的时间和滚动位置。

// 为window对象添加scroll事件监听器
window.addEventListener('scroll', function() {
    // 获取当前的滚动位置
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    // 输出滚动位置
    console.log('Scroll Position: ' + scrollTop);
    // 输出事件发生时间
    console.log('Event Time: ' + new Date().toISOString());
});

这段代码会在用户滚动页面时输出当前的滚动位置和事件发生的时间。window.pageYOffset是现代浏览器中用来获取滚动位置的标准方法，但为了兼容旧版浏览器，可能需要检查document.documentElement.scrollTop或 document.body.scrollTop 

---

● 参考资料 ●

—— JS | 图片懒加载的四种实现方案之IntersectionObserver - 烤地瓜的CSDN博客 ——

IntersectionObserver（交叉观察器）-CSDN博客 | IntersectionObserver API学习总结

一文详解前端进阶之IntersectionObserver_脚本之家 | Js中的intersectionObserver - 前端押题宝典