别再瞎忙了！Intersection Observer API 懒加载实战，性能优化就靠它

“喂，哥们儿，你还在用传统的滚动事件做懒加载吗？太out啦！”

今天咱来聊聊 Intersection Observer API，这可是现代 Web 开发中实现懒加载的利器，性能好，兼容性也不错，关键是写起来还贼简单！

啥是懒加载？为啥要用它？

先给还不了解的兄弟们科普一下。懒加载，顾名思义，就是“懒”，不到时候不加载。具体到网页上，就是图片、视频等资源，只有当它们滚动到可视区域内时，才开始加载。这样做的好处显而易见：

• 减少初始加载时间： 页面打开时，只加载首屏内容，速度嗖嗖的。
• 节省带宽： 用户不看的内容就不加载，流量省下来干点啥不好？
• 提升用户体验： 页面秒开，用户心情舒畅，自然更愿意在你这儿多待会儿。

传统懒加载的“坑”

以前，咱们实现懒加载，通常都是监听 scroll 事件，然后计算元素的位置，判断是否进入可视区域。这法子能用，但有几个问题：

• 性能开销大： scroll 事件触发频率很高，频繁计算会造成页面卡顿，尤其是在低端设备上。
• 代码复杂： 判断元素位置的逻辑写起来挺麻烦，还得考虑各种边界情况。
• 容易出错： 一不小心，就可能出现图片加载不出来，或者重复加载的问题。

Intersection Observer API：懒加载的“救星”

Intersection Observer API 的出现，完美解决了这些问题。它提供了一种异步的方式来观察目标元素与其祖先元素或顶级文档视窗 (viewport) 交叉状态的变化。简单来说，就是它可以告诉你，一个元素啥时候进入了可视区域，啥时候离开了可视区域。

基本用法

用起来也很简单，三步走：

1. 创建 Intersection Observer 实例：

   const observer = new IntersectionObserver(callback, options);
   

   • callback：当目标元素可见性发生变化时，会调用这个回调函数。它接收一个 entries 参数，是一个数组，包含了所有发生变化的目标元素的信息。
   • options：可选参数，用来配置观察器。常用的有：
     • root：指定根元素，用于检测目标元素与根元素的交叉情况。默认为浏览器视窗。
     • rootMargin：一个 CSS margin 值，用来扩展或缩小根元素的范围。可以理解为“提前加载”或“延迟加载”的距离。
     • threshold：一个数组，指定了目标元素可见比例达到多少时，触发回调函数。比如 [0, 0.5, 1] 表示目标元素完全不可见、可见一半、完全可见时都会触发。

2. 指定要观察的目标元素：

   observer.observe(targetElement);
   

3. 在回调函数中处理可见性变化：

   function callback(entries) {
     entries.forEach(entry => {
       if (entry.isIntersecting) {
         // 目标元素进入可视区域
         // 加载图片、视频等资源
       } else {
         // 目标元素离开可视区域
       }
     });
   }

实战：图片懒加载

下面咱们用 Intersection Observer API 实现一个图片懒加载的例子：

<img data-src="image1.jpg" alt="Image 1">
<img data-src="image2.jpg" alt="Image 2">
<img data-src="image3.jpg" alt="Image 3">

const images = document.querySelectorAll('img[data-src]');
 
const observer = new IntersectionObserver(
  (entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        const src = img.dataset.src;
 
        img.src = src;
        img.removeAttribute('data-src');
 
        // 加载完成后，停止观察
        observer.unobserve(img);
      }
    });
  },
  {
    rootMargin: '100px 0px',
    threshold: 0.1,
  }
);
 
images.forEach(image => {
  observer.observe(image);
});

这个例子中，咱们把图片的真实地址放在 data-src 属性中，当图片进入可视区域时，再把 data-src 的值赋给 src 属性，实现图片的加载。同时，为了避免重复加载，加载完成后，咱们用 observer.unobserve(img) 停止了对该图片的观察。

“瞧见没？就这么简单！代码清晰，逻辑明了，性能还杠杠的！”

进阶优化

上面那个例子只是最基本的用法，咱们还可以进一步优化：

• 添加 loading 占位符： 在图片加载前，可以先显示一个 loading 占位符，提升用户体验。
• 处理加载失败的情况： 如果图片加载失败，可以显示一个错误提示，或者尝试重新加载。
• 支持不同类型的资源： 除了图片，还可以懒加载视频、iframe 等其他资源。
• 结合其他技术： 可以结合 srcset、sizes 等属性，实现响应式图片懒加载。

兼容性

Intersection Observer API 的兼容性已经很好了，主流浏览器都支持。实在不放心，可以用 Polyfill 来兼容老旧浏览器。

“总之，Intersection Observer API 绝对是懒加载的首选方案。赶紧用起来吧，让你的网站飞起来！”

深入思考：除了懒加载还能干啥？

你以为 Intersection Observer API 只能用来做懒加载？太小瞧它了！它还可以实现很多其他功能，比如：

• 无限滚动： 当页面滚动到底部时，自动加载更多内容。
• 元素曝光统计： 统计页面上某个元素被用户看到的次数。
• 广告曝光： 只有当广告进入可视区域时，才开始加载广告资源。
• 页面性能监控： 监测页面上各个元素的加载情况，分析性能瓶颈。

“怎么样，是不是感觉打开了新世界的大门？赶紧去探索 Intersection Observer API 的更多用法吧！”

“还有啥问题，尽管在评论区留言，哥们儿给你一一解答！”

代码细节补充

“哎，等等，好像有兄弟对 rootMargin 和 threshold 这两个参数不太理解，我再补充解释一下。”

• rootMargin：这个参数可以让你控制触发回调的时机。比如，你设置 rootMargin: '100px 0px'，就表示在目标元素距离视窗上下边缘还有 100px 的时候，就会触发回调。这样可以实现“预加载”，让用户在滚动到目标元素之前，就提前把内容加载好，体验更流畅。

• threshold：这个参数可以让你更精细地控制触发回调的条件。比如，你设置 threshold: [0, 0.5, 1]，就表示目标元素完全不可见、可见一半、完全可见时，都会触发回调。这样你可以根据不同的可见程度，做不同的处理。

“这下明白了吧？这两个参数用好了，可以让你的懒加载更加灵活、高效。”