一文详解前端进阶之IntersectionObserver

前言

在前端开发中，我们经常需要对一些元素的可见性进行监听，并在元素出现或消失时做出相应的处理。传统的方法通常是通过监听页面滚动事件来判断元素是否进入或离开视口，这种方式存在一些问题，例如需要频繁的计算和检测，这会影响性能和用户体验。

为了解决这些问题，W3C推出了IntersectionObserver API。本文将详细讲解IntersectionObserver的使用方法以及一些注意点。

IntersectionObserver API

IntersectionObserver 是 W3C 官方推出的一个基于观察者设计模式的 API。它可以用来异步地观察目标元素与其父级或根元素在交叉的程度，从而判断目标元素的可见性。

创建 IntersectionObserver 实例

我们可以通过创建 IntersectionObserver 实例来监听目标元素的变化。创建实例时需传入一个函数作为回调函数，在目标元素进入或离开视图窗口时会被调用，调用时会传回一个参数 entries，它是一个数组，包含了被观察元素的相关信息，所以我们可以在回调函数中取出 entries 数组中的第一个元素来获取当前的观察目标的信息。

其基本格式为：

const observer = new IntersectionObserver(entries => {
  // 当被监听元素进入或离开视图窗口时，回调函数会被调用
  const entry = entries[0];
  if (entry.intersectionRatio > 0) {
    // 目标元素进入视图窗口
  } else {
    // 目标元素离开视图窗口
  }
});

监听目标元素

在创建 Observer 实例后，我们需要通过调用 observe 方法来指定要监听的目标元素。当指定的元素变化时，Observer 的回调函数会被立即触发。

observer.observe(document.querySelector('#target'));

停止监听

如果要停止监听目标元素，可以调用 disconnect 方法：

observer.disconnect();

IntersectionObserver 的应用场景

图片懒加载

图片懒加载是 IntersectionObserver 的一个经典应用场景。我们可以使用 IntersectionObserver 来判断图片是否进入视图窗口，当图片进入窗口时再加载图片资源。

<img src="placeholder.jpg" data-src="image.jpg" class="lazyload" alt="image">

// 预加载的图片都用 lazyload 类标记
const images = document.querySelectorAll('.lazyload');
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    // 如果图片进入视口，则将 data-src 中的图片路径赋值给 src
    if (entry.isIntersecting) {
      const image = entry.target;
      const src = image.dataset.src;
      image.src = src;
      observer.unobserve(image); // 停止监听已加载的图片
    }
  });
});
images.forEach(image => {
  observer.observe(image);
});

无限滚动

无限滚动也是 IntersectionObserver 的一个应用场景。当用户向下滚动时，我们可以根据 scrollTop 或页面开头和结尾的距离计算出当前展示的可视区域，当这个区域内的内容快要滚出视图时，即将滚动到区域底部时，再请求展示新的内容。

/* 用于撑起页面高度的占位元素 */
.infinite-scroll-loading {
    height: 50px;
}

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  ...
  <li class="infinite-scroll-loading"></li>
</ul>

const list = document.querySelector('#list');
const loading = list.querySelector('.infinite-scroll-loading');
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting && !isLoading) {
      // 请求新的数据
      fetchData().then(data => {
        isLoading = false;
        if (data.length === 0) {
          observer.unobserve(loading);
        }
      });
      isLoading = true;
    }
  });
});
observer.observe(loading);

总结

本文详细讲解了 IntersectionObserver 的基本用法及其应用场景。使用 IntersectionObserver 可以有效地提高性能和用户体验，特别是在处理大量的可视元素时更为明显。此外，IntersectionObserver 还有一些高级用法，例如多元素监听、throttle 和 debounce，如果有兴趣可以继续了解。

参考

• Intersection Observer API: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

示例说明

示例一是图片懒加载的应用场景，当图片进入视口时再加载图片资源。示例二是无限滚动的应用场景，当用户滚动页面到底部时再请求展示新的内容。