懒加载终极奥义：Intersection Observer API 实战图解

你想没想过，网站图片太多加载慢，用户嗖嗖地跑了，你却还在干着急？今天咱就来聊聊网页图片懒加载的终极解决方案——Intersection Observer API。别担心，这玩意儿不难，保准你一看就懂，一学就会，还能马上用到你自己的网站上！

先别急着复制代码，咱们先来唠唠嗑，说说为啥要用懒加载，以及为啥 Intersection Observer API 是懒加载的“终极奥义”。

传统懒加载的那些坑

你以前可能听说过或者用过一些传统的懒加载方法，比如监听 scroll 事件，然后计算图片位置，判断是否在可视区域内。这种方法能用，但有几个问题：

1. 性能问题：scroll 事件触发频率非常高，每次滚动都会触发大量的计算，很容易造成页面卡顿，尤其是在低端设备上，那酸爽，谁用谁知道。
2. 兼容性问题：不同浏览器对 scroll 事件的处理可能不一致，需要写一些兼容性代码。
3. 代码复杂：计算图片位置、判断是否在可视区域内，这些逻辑写起来也挺麻烦的，容易出错。

Intersection Observer API：懒加载的救星

Intersection Observer API 就是为了解决这些问题而生的。它可以异步观察目标元素与其祖先元素或视口的交叉状态，简单来说，就是它可以告诉你一个元素是否进入或离开了可视区域。而且，它是异步的，不会阻塞主线程，性能杠杠的！

更重要的是，它使用起来非常简单，几行代码就能搞定懒加载，再也不用写那些复杂的计算逻辑了。

实战：用 Intersection Observer API 实现图片懒加载

好了，说了这么多，咱们来点实际的，看看怎么用 Intersection Observer API 实现图片懒加载。

先来个 HTML 结构：

<div class="container">
  <img data-src="image1.jpg" alt="图片1" class="lazy-load">
  <img data-src="image2.jpg" alt="图片2" class="lazy-load">
  <img data-src="image3.jpg" alt="图片3" class="lazy-load">
  <!-- 更多图片 -->
</div>

注意，这里我们把图片的真实地址放在 data-src 属性中，而不是 src 属性中。这是因为我们不想让浏览器一开始就加载这些图片，只有当图片进入可视区域时，我们才把 data-src 的值赋给 src。

接下来是 JavaScript 代码：

const lazyImages = document.querySelectorAll('.lazy-load');
 
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      const src = img.dataset.src;
 
      if (src) {
        img.src = src;
        img.removeAttribute('data-src'); // 移除 data-src 属性
      }
 
      observer.unobserve(img); // 停止观察已经加载的图片
    }
  });
}, {
  rootMargin: '0px 0px 100px 0px', // 可选：设置触发交叉的阈值
  threshold: 0.1 // 可选：设置元素可见比例达到多少时触发回调
});
 
lazyImages.forEach(image => {
  observer.observe(image);
});

代码解释：

1. document.querySelectorAll('.lazy-load')：获取所有需要懒加载的图片。
2. new IntersectionObserver(...)：创建一个 Intersection Observer 实例。
   • 第一个参数是一个回调函数，当目标元素与视口交叉状态发生变化时，会调用这个回调函数。回调函数接收两个参数：
     • entries：一个数组，包含所有发生交叉状态变化的 IntersectionObserverEntry 对象。
     • observer：Intersection Observer 实例本身。
   • 第二个参数是一个配置对象，可选：
     • rootMargin：设置一个边距，可以提前或延迟触发交叉。比如 '0px 0px 100px 0px' 表示在图片进入视口下方 100px 时就触发加载。
     • threshold：设置一个阈值，表示目标元素与视口交叉的比例达到多少时触发回调。可以是 0 到 1 之间的数字，或者一个数组。比如 0.1 表示元素有 10% 进入可视区域时就触发。
3. entries.forEach(...)：遍历所有发生交叉状态变化的 IntersectionObserverEntry 对象。
4. entry.isIntersecting：判断目标元素是否进入了可视区域。
5. entry.target：获取触发交叉的目标元素，也就是 <img> 元素。
6. img.dataset.src：获取 data-src 属性的值。
7. img.src = src：把 data-src 的值赋给 src，开始加载图片。
8. img.removeAttribute('data-src'): 图片加载后，移除这个没用的属性。
9. observer.unobserve(img)：停止观察已经加载的图片，避免重复加载。
10. observer.observe(image)：开始观察每一张图片。

进阶用法

上面的代码已经可以实现基本的图片懒加载了，但 Intersection Observer API 还有一些进阶用法，可以让你的懒加载更强大。

1. 处理不同类型的资源

除了图片，你还可以用 Intersection Observer API 来懒加载其他类型的资源，比如视频、iframe 等。只需要把相应的元素选择器和加载逻辑修改一下就行了。

2. 预加载

你可以在图片即将进入可视区域时就开始预加载，而不是等到完全进入可视区域才加载。这可以通过设置 rootMargin 来实现。比如：

{
  rootMargin: '0px 0px 200px 0px', // 在图片进入视口下方 200px 时就开始加载
}

3. 处理动画

你可以在元素进入可视区域时添加一些动画效果，比如淡入、滑动等。这可以通过在回调函数中添加 CSS 类名来实现。

4. 兼容性处理

Intersection Observer API 的兼容性已经很好了，但在一些老旧的浏览器上还是不支持。你可以使用 polyfill 来解决这个问题。比如：

<script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script>

总结

Intersection Observer API 是一个非常强大的 API，它可以让你轻松实现各种懒加载效果，提高网站性能，改善用户体验。强烈建议你把它加入到你的工具箱中！

怎么样，是不是感觉懒加载也没那么难了？赶紧去试试吧！别忘了，实践出真知，多动手才能真正掌握！如果你在使用的过程中遇到什么问题，欢迎随时来问我，咱们一起交流学习！