PWA 开发中使用 Intersection Observer API 监测元素的最佳实践-JavaScript中文网-JavaScript教程资源分享门户

近年来，PWA（Progressive Web App）的开发愈发成为前端界的热门话题。作为一种新型的 web 应用形态，PWA 通过利用浏览器和 Web 技术的最新能力，使得 web 应用具备了原生应用程序的体验。同时，PWA 具有离线缓存、推送通知、后台自动更新等诸多优势，为 web 应用的发展带来了新的机遇。

在 PWA 的开发过程中，为提升用户体验，我们需要在页面中添加各种交互元素。比如，当用户向下滚动页面时，我们需要动态加载更多的内容，或者当用户的屏幕滚动到页面的底部时，我们需要触发一些特定的操作。这时，Intersection Observer API 就能派上用场了。本文将详细介绍在 PWA 开发中如何使用 Intersection Observer API 监测元素，并给出一些最佳实践和示例代码。

什么是 Intersection Observer API？

简单来说，Intersection Observer API 是一个用于 asynchronously 监测元素是否出现在视口中的 API。它类似于浏览器原生的 IntersectionObserver 接口，并提供了跨平台的功能。这个 API 能够观察到一个元素与包含它的容器元素或根节点是否交叉，并在特定的情况下触发一个回调函数。

Intersection Observer API 的优势

Intersection Observer API 相较于传统的 scroll 事件监听方式有以下优势：

异步操作，不会阻塞 ui 渲染
对性能的影响更小
可以观测到元素在视口中是否交叉，而不仅仅是滚动的位置

如何使用 Intersection Observer API？

使用 Intersection Observer API 的大致步骤如下：

创建 Intersection Observer 对象
将需要监听的元素添加到 Intersection Observer 中
给 Intersection Observer 设置一个回调函数（Intersection Observer Entry）
监听元素的交叉情况

// javascriptcn.com 代码示例
const observer = new IntersectionObserver(callback, options);
const targets = document.querySelectorAll('.element');

targets.forEach(target => observer.observe(target));

function callback(entries, observer) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // do something
    }
  })
}

在上面的代码中，我们创建了一个 IntersectionObserver 对象，并将需要监听的元素添加到了其中。同时，我们还定义了一个回调函数，用于在元素与根节点（或包含容器）发生交叉时执行操作。

callback 的参数是一个包含 IntersectionObserverEntry 对象的 array，对于每个被观察的目标元素，此对象都提供了一些很有用的信息，比如交叉比率（指目标元素的几何形状与根元素的 CV（RootBounds）的交叉部分占目标元素总面积的比例）以及是否进入视口等信息。

下面，我们将介绍一些在 PWA 开发中使用 Intersection Observer API 的最佳实践。

Intersection Observer API 的最佳实践

懒加载图片

在 web 应用中，图片通常是页面加载中比较重的一部分。因此，我们可以使用懒加载的技术，将图片的加载延迟到用户滚动到它们的位置时再加载，从而提升 web 应用的加载速度。懒加载图片通常使用 Intersection Observer API 实现。

示例代码：

<img src="placeholder.png" data-src="image.png" alt="image">

// javascriptcn.com 代码示例
const images = document.querySelectorAll('img');

const observer = new IntersectionObserver(function (entries) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      const src = img.getAttribute('data-src');
      img.setAttribute('src', src);
      observer.unobserve(img);
    }
  });
});

images.forEach(img => observer.observe(img));

在上面的代码中，我们首先获取所有的图片元素，然后创建 IntersectionObserver 对象，将这些图片元素添加到其中。当一个图片元素进入了视口中时，我们就将这个元素的 data-src 属性替换为 src 属性。

实现无限滚动

无限滚动是指，当用户滚动到页面的底部时，滚动窗口不会停止滚动，而是自动从服务器端请求新内容。在使用 Intersection Observer API 实现无限滚动时，我们可以监听最后一个元素是否进入了视口中。

示例代码：

<div class="container">
  <div class="item" data-index="1">item 1</div>
  <div class="item" data-index="2">item 2</div>
  <div class="item" data-index="3">item 3</div>
  ...
  <div class="item" data-index="100">item 100</div>
</div>

// javascriptcn.com 代码示例
const container = document.querySelector('.container');
const lastIndex = container.children.length;

const observer = new IntersectionObserver(function (entries) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const index = parseInt(entry.target.getAttribute('data-index'));
      if (index === lastIndex) {
        // 请求新的内容
      }
    }
  });
});

observer.observe(container.lastElementChild);

在上面的代码中，我们首先获取了容器元素，并获取其中元素的个数。然后，我们创建了 IntersectionObserver 对象，并观测了容器中的最后一个元素。当最后一个元素进入视口中时，我们就知道到达了容器的底部，并可以请求新的内容来填充容器。

移动端横向滚动

在移动端，我们通常需要实现横向滚动。在使用 Intersection Observer API 实现横向滚动时，我们可以监听一个固定宽度的元素是否进入了视口中。

示例代码：

<div class="container">
  <div class="item" style="width: 320px;">item 1</div>
  <div class="item" style="width: 320px;">item 2</div>
  <div class="item" style="width: 320px;">item 3</div>
  ...
  <div class="item" style="width: 320px;">item 10</div>
</div>

// javascriptcn.com 代码示例
const container = document.querySelector('.container');
const itemWidth = 320;

const observer = new IntersectionObserver(function (entries) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const index = Math.floor(entry.target.getBoundingClientRect().left / itemWidth);
      // do something
    }
  });
});

observer.observe(container);

在上面的代码中，我们首先获取了容器元素。然后，我们创建了 IntersectionObserver 对象，并观测了容器元素。当容器元素进入视口中时，我们就可以通过计算最靠近视口左边缘的元素的索引，来判断当前显示的是哪个元素，并执行相应的操作。

总结

通过这篇文章，我们了解了 Intersection Observer API 的核心功能，以及在 PWA 开发中使用 Intersection Observer API 监测元素的最佳实践。除了上述例子，Intersection Observer API 还可以用于视频的播放和暂停、网页广告的曝光量监测等等。希望本文能够帮助读者更好地理解 Intersection Observer API，并在实际开发中运用自如。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653491ea7d4982a6eb957d2f