请解释 Intersection Observer API 的作用和用法。如何使用 Intersection Observer API 实现懒加载？

推荐答案

Intersection Observer API 的主要作用是异步监听目标元素与其祖先元素或视口之间的交叉状态。它允许你高效地检测元素何时进入或离开视口，而无需使用轮询或事件监听，这在性能上更加友好。

用法：

1. 创建 IntersectionObserver 实例：

   const observer = new IntersectionObserver(callback, options);

   • callback：一个回调函数，在目标元素与根元素的交叉状态发生改变时执行。
   • options：一个配置对象，用于自定义观察行为，例如 root（根元素，默认为视口）、rootMargin（根元素的边距）、threshold（交叉比例阈值）。

2. 观察目标元素：

   const targetElement = document.querySelector('#lazy-image');
   observer.observe(targetElement);

3. 回调函数：

   // www.javascriptcn.com code example
   function callback(entries, observer) {
     entries.forEach(entry => {
       if (entry.isIntersecting) {
         // 目标元素与根元素交叉
         // 在这里执行加载图片等操作
         const img = entry.target;
         img.src = img.dataset.src;
         observer.unobserve(img); // 取消观察，避免重复加载
       }
     });
   }

使用 Intersection Observer 实现懒加载：

1. HTML 结构：

   <img data-src="actual-image.jpg" src="placeholder.jpg" alt="Lazy Loaded Image" id="lazy-image">

   使用 data-src 属性保存实际图片路径，src 属性使用占位符图片。

2. JavaScript 代码：

   // www.javascriptcn.com code example
   const lazyLoad = new IntersectionObserver((entries, observer) => {
     entries.forEach(entry => {
       if (entry.isIntersecting) {
         const img = entry.target;
         img.src = img.dataset.src;
         observer.unobserve(img);
       }
     });
   });
   
   const lazyImages = document.querySelectorAll('img[data-src]');
   lazyImages.forEach(img => {
     lazyLoad.observe(img);
   });

   这段代码会遍历所有含有 data-src 属性的图片，并在它们进入视口时，将 data-src 的值赋给 src 属性，从而实现懒加载。

本题详细解读

Intersection Observer API 的作用

Intersection Observer API 旨在提供一种高效的方式来检测目标元素何时与其祖先元素或文档视口交叉。相较于传统的基于事件监听和轮询的方法，Intersection Observer API 提供了以下优势：

• 性能优化: 它采用异步的方式进行交叉状态检测，避免了同步事件处理可能导致的页面卡顿，以及高频轮询对性能的损耗。
• 简化代码: 它封装了复杂的交叉检测逻辑，使得开发者无需手动计算元素的偏移量和视口位置，从而减少了代码复杂性。
• 精准控制: 通过配置 root， rootMargin 和 threshold 等参数，可以实现更精细化的交叉检测。

Intersection Observer API 的用法

Intersection Observer 的使用主要包含以下步骤：

1. 实例化 IntersectionObserver： 使用 new IntersectionObserver(callback, options) 创建一个 Intersection Observer 实例。

   • callback (必选)： 当观察的目标元素和根元素交叉状态发生改变时执行的回调函数。该回调函数接收两个参数：
     • entries： 一个 IntersectionObserverEntry 对象的数组，每个对象表示一个被观察的元素，包含其交叉状态的相关信息。
     • observer: 当前 IntersectionObserver 实例本身。
   • options (可选)： 一个配置对象，用于自定义观察行为。它主要包含以下属性：
     • root： 用于计算交叉的根元素。默认值是 null, 表示使用文档的视口作为根元素。
     • rootMargin： 根元素的边距。允许你在根元素的边界上添加或减少额外的空间，以更早或更晚地触发交叉事件，采用 CSS 的 margin 语法 ("10px 20px 30px 40px").
     • threshold： 一个数值或数值数组，用于指定交叉比例阈值。例如， 0.5 表示目标元素至少有 50% 可见时，回调函数被触发。 [0, 0.25, 0.5, 0.75, 1] 会在目标元素 0%， 25%，50%，75% 和 100% 可见时触发回调。

2. 观察目标元素： 使用 observer.observe(targetElement) 方法开始观察目标元素。每个目标元素可以是任意的 DOM 节点。

3. 回调函数处理： 在 callback 函数中，你可以根据 entries 数组中的信息执行操作：

   • entry.isIntersecting： 布尔值，指示目标元素当前是否与根元素交叉。
   • entry.intersectionRatio： 数值，指示目标元素与根元素交叉的比例。
   • entry.target： 被观察的目标元素。
   • entry.boundingClientRect： 目标元素的矩形信息。
   • entry.rootBounds: 根元素的矩形信息。
   • entry.intersectionRect: 交叉区域的矩形信息。
   • entry.time： 发生交叉状态改变的时间戳。

4. 取消观察： 当不再需要观察元素时，使用 observer.unobserve(targetElement) 停止观察单个目标元素， 或使用 observer.disconnect() 停止观察所有目标元素。

使用 Intersection Observer 实现懒加载

懒加载的核心思想是延迟加载非关键资源（如图片），直到它们进入用户视口时才进行加载，以减少页面加载时间和带宽消耗，提升用户体验。 使用 Intersection Observer API 进行懒加载的步骤如下：

1. 占位图和实际图: HTML 结构中， 为需要懒加载的图片元素添加 data-src 属性， 用于存储实际图片路径， 同时将 src 属性设置为占位符图片或者为空白占位。

2. 创建 IntersectionObserver 实例: 初始化一个 IntersectionObserver 实例，回调函数会在图片进入视口时被调用。

3. 观察目标元素: 获取所有需要懒加载的图片元素 (例如使用 document.querySelectorAll('img[data-src]')) 并使用 observer.observe() 方法进行观察。

4. 回调函数逻辑: 在回调函数中，遍历 entries 数组，如果 entry.isIntersecting 为 true，则将 data-src 属性的值赋给 src 属性，加载实际图片。 加载完成后， 使用 observer.unobserve(entry.target) 停止观察该图片元素，避免重复加载。

5. 性能优化:

   • 可以为占位图设置模糊效果或者低分辨率图像，提升用户感知。
   • 合理设置 rootMargin 和 threshold，优化加载时机。