JavaScript内核与高级编程之：`IntersectionObserver`：其在图片懒加载和无限滚动中的高效实现。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷，大家好！我是今天的主讲人，咱们今天聊聊一个JavaScript里的小能手，名叫IntersectionObserver。别看名字挺唬人，其实它就是个观察员，专门盯着网页上的元素，看看它们是不是和咱们的视窗（viewport）产生了交集。

你可能会问，观察这个干啥？嘿嘿，用处可大了！像什么图片懒加载，无限滚动，甚至广告曝光统计，都少不了它。这玩意儿就像一个勤劳的小蜜蜂，默默地提高着咱们网页的性能和用户体验。

一、IntersectionObserver是个啥？

简单来说，IntersectionObserver API 允许你异步地观察一个目标元素（target element）与一个祖先元素（ancestor element）或顶级文档视窗（viewport）的交叉状态。说的更直白点儿，就是观察某个元素有没有进入或者离开你的屏幕。

1.1 基本概念

Observer (观察者): 就是 IntersectionObserver 实例，负责监听交叉状态。
Target (目标): 你想观察的那个元素，比如一张图片，一个列表项。
Root (根): 作为参照系的祖先元素。如果设置为 null，则使用浏览器视窗作为根。
Root Margin (根边距): 在计算交叉状态时，对根元素添加的边距。可以理解为扩大或缩小根元素的范围。
Threshold (阈值): 一个数值或者数值数组，表示目标元素与根元素的交叉比例。当交叉比例达到或超过阈值时，会触发回调函数。

1.2 构造函数

创建一个 IntersectionObserver 实例需要使用其构造函数：

const observer = new IntersectionObserver(callback, options);

callback: 当目标元素与根元素的交叉状态发生变化时，会执行的回调函数。
options: 一个可选的配置对象，用于设置观察者的行为，包括 root, rootMargin, 和 threshold。

1.3 回调函数

callback 函数接收两个参数：

entries: 一个 IntersectionObserverEntry 对象的数组，每个对象描述了一个目标元素的交叉状态。
observer: IntersectionObserver 实例本身。

IntersectionObserverEntry 对象包含以下属性：

属性	描述
`time`	交叉发生时的时间戳（毫秒）。
`rootBounds`	根元素的边界矩形信息（`DOMRectReadOnly` 对象）。如果没有设置根元素，则为视窗的边界信息。
`boundingClientRect`	目标元素的边界矩形信息（`DOMRectReadOnly` 对象）。
`intersectionRect`	目标元素与根元素的交叉区域的边界矩形信息（`DOMRectReadOnly` 对象）。
`intersectionRatio`	交叉比例，即 `intersectionRect` 的面积与 `boundingClientRect` 的面积之比。这是一个 0 到 1 之间的数值。
`target`	被观察的目标元素。
`isIntersecting`	布尔值，表示目标元素当前是否与根元素交叉。

二、图片懒加载：让你的网页飞起来

图片懒加载是一种优化网页性能的常用技术。它的核心思想是：只在图片进入视窗时才加载图片，而不是一次性加载所有图片。这样可以减少初始加载时间，提高页面响应速度。

2.1 没有IntersectionObserver的日子

在 IntersectionObserver 出现之前，实现图片懒加载通常使用以下方法：

监听 scroll 事件： 在滚动时，检查每个图片元素的位置，如果图片进入视窗，则加载图片。
使用 setTimeout 或 requestAnimationFrame： 定期检查图片元素的位置，并加载图片。

这些方法都有一些缺点：

性能问题： scroll 事件会频繁触发，导致性能下降。
代码复杂： 需要手动计算元素的位置，编写大量的代码。

2.2 IntersectionObserver大显身手

使用 IntersectionObserver 实现图片懒加载非常简单高效：

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

<script>
  const lazyImages = document.querySelectorAll('.lazy-load');

  const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src; // 将 data-src 的值赋给 src
        img.classList.remove('lazy-load'); // 移除 lazy-load 类
        observer.unobserve(img); // 停止观察该图片
      }
    });
  });

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

代码解释：

HTML: 图片元素的 src 属性为空，将真实的图片 URL 存储在 data-src 属性中。
JavaScript:
- 获取所有带有 .lazy-load 类的图片元素。
- 创建一个 IntersectionObserver 实例。
- 在回调函数中，检查 isIntersecting 属性，如果为 true，则表示图片进入视窗。
- 将 data-src 的值赋给 src，加载图片。
- 移除 lazy-load 类，防止重复加载。
- 调用 observer.unobserve(img) 停止观察该图片，提高性能。
- 使用 observer.observe(img) 开始观察每个图片元素。

2.3 高级用法：添加占位符和过渡效果

为了提供更好的用户体验，可以为图片添加占位符和过渡效果：

<img data-src="image1.jpg" alt="Image 1" class="lazy-load placeholder">
<style>
.placeholder {
  background-color: #f2f2f2; /* 占位符颜色 */
  min-height: 200px; /* 占位符高度 */
  width: 100%;
  object-fit: cover;
  transition: opacity 0.5s ease-in-out; /* 添加过渡效果 */
  opacity: 0.5;
}

.loaded {
  opacity: 1;
}
</style>

<script>
  const lazyImages = document.querySelectorAll('.lazy-load');

  const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;

        img.onload = () => {
          img.classList.add('loaded'); // 图片加载完成后添加 loaded 类
          img.classList.remove('lazy-load', 'placeholder');
          observer.unobserve(img);
        }
      }
    });
  });

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

代码解释：

CSS: 为 .placeholder 类添加背景颜色和最小高度，模拟占位符效果。添加过渡效果，让图片加载时更平滑。
JavaScript: 在图片加载完成后，添加 loaded 类，移除 placeholder 类和 lazy-load 类。

三、无限滚动：永远刷不完的内容

无限滚动是一种流行的网页设计模式。它的核心思想是：当用户滚动到页面底部时，自动加载更多内容，无需手动翻页。

3.1 没有IntersectionObserver的日子

在 IntersectionObserver 出现之前，实现无限滚动通常使用以下方法：

监听 scroll 事件： 在滚动时，检查页面是否滚动到底部，如果滚动到底部，则加载更多内容。
使用 offsetHeight, scrollHeight, 和 scrollTop 属性： 计算页面滚动距离，判断是否滚动到底部。

这些方法同样存在性能问题和代码复杂的问题。

3.2 IntersectionObserver再次发光

使用 IntersectionObserver 实现无限滚动非常优雅：

<div id="content">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <!-- 更多内容 -->
</div>
<div id="load-more">Loading...</div>

<script>
  const loadMore = document.getElementById('load-more');
  const content = document.getElementById('content');
  let page = 1; // 当前页码

  const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        loadMoreContent();
        observer.unobserve(loadMore); // 停止观察加载更多按钮
      }
    });
  }, {
    rootMargin: '0px', // 触发加载的距离，可以根据需求调整
    threshold: 0.1 // 交叉比例达到 10% 时触发
  });

  observer.observe(loadMore); // 开始观察加载更多按钮

  function loadMoreContent() {
    loadMore.textContent = 'Loading...'; // 显示加载中状态
    // 模拟异步加载数据
    setTimeout(() => {
      // 假设这是从服务器获取的数据
      const newData = [`Item ${page * 3 + 1}`, `Item ${page * 3 + 2}`, `Item ${page * 3 + 3}`];

      newData.forEach(item => {
        const div = document.createElement('div');
        div.classList.add('item');
        div.textContent = item;
        content.appendChild(div);
      });

      page++; // 页码加 1
      loadMore.textContent = 'Load More'; // 恢复加载更多按钮的文本
      observer.observe(loadMore); // 重新开始观察加载更多按钮
    }, 1000);
  }
</script>

代码解释：

HTML: #content 元素包含所有内容，#load-more 元素作为触发加载更多内容的指示器。
JavaScript:
- 获取 #load-more 元素和 #content 元素。
- 创建一个 IntersectionObserver 实例，观察 #load-more 元素。
- 在回调函数中，如果 #load-more 元素进入视窗，则调用 loadMoreContent() 函数加载更多内容。
- loadMoreContent() 函数模拟异步加载数据，并将新内容添加到 #content 元素中。
- 加载完成后，重新开始观察 #load-more 元素。
- rootMargin 选项可以设置触发加载的距离，threshold 选项可以设置交叉比例。

3.3 优化技巧

节流： 限制 loadMoreContent() 函数的执行频率，防止频繁加载数据。
错误处理： 处理加载数据失败的情况，显示错误提示。
加载完成： 当所有数据加载完成后，隐藏 #load-more 元素。

四、其他应用场景

IntersectionObserver 的应用场景非常广泛，除了图片懒加载和无限滚动，还可以用于：

广告曝光统计： 统计广告的曝光次数。
元素动画： 当元素进入视窗时，触发动画效果。
监控可见性： 实时监控元素的可见性状态。
性能分析： 检测网页性能瓶颈。

应用场景	描述
广告曝光统计	使用 `IntersectionObserver` 监控广告元素是否进入视窗，从而统计广告的曝光次数。可以设置不同的 `threshold` 值，例如，当广告元素至少 50% 可见时才算一次曝光。
元素动画	当元素进入视窗时，使用 `IntersectionObserver` 触发 CSS 动画或 JavaScript 动画。可以实现各种炫酷的滚动效果，例如，元素从底部滑入，或者元素逐渐显示。
监控可见性	使用 `IntersectionObserver` 实时监控元素的可见性状态。可以用于实现各种功能，例如，当元素不可见时，暂停视频播放，或者当元素可见时，恢复视频播放。
性能分析	使用 `IntersectionObserver` 检测网页性能瓶颈。例如，可以监控图片加载时间，或者监控元素的渲染时间。

五、兼容性与Polyfill

IntersectionObserver 的兼容性在现代浏览器中表现良好，但对于一些老旧的浏览器，可能需要使用 Polyfill 来提供支持。

CanIUse: 可以在 CanIUse 网站上查看 IntersectionObserver 的兼容性信息。
Polyfill: 可以使用 w3c/IntersectionObserver 这个 Polyfill 来提供支持。

六、总结

IntersectionObserver 是一个强大的 API，可以帮助你提高网页性能和用户体验。它使用简单，功能强大，值得你在项目中尝试使用。

希望今天的讲座对大家有所帮助！感谢各位的观看！下次再见！

发表回复 取消回复

发表回复取消回复