JS `Intersection Observer`：高效检测元素可见性，实现懒加载与无限滚动

各位观众老爷们，大家好！我是你们的老朋友，bug终结者（暂时还没被终结）。今天咱们来聊聊一个前端小技巧，但用处却很大的东西：Intersection Observer，中文名叫“交叉观察者”。

这玩意儿，能让你在不卡CPU的情况下，优雅地检测元素是否进入了视口，从而实现懒加载、无限滚动等等炫酷的效果。

别怕，听名字好像很高大上，其实理解起来很简单。咱们一步一步来，保证你听完之后，也能对着浏览器指点江山，大喊一声：“代码，启动！”

一、啥是Intersection Observer？

简单来说，Intersection Observer就像一个勤劳的观察员，时刻盯着你指定的元素（目标元素），看它跟另一个元素（通常是视口，也就是浏览器窗口）有没有“交叉”。

这个“交叉”可以是完全进入视口，也可以是部分进入，甚至只是擦了个边。你可以根据自己的需求，设置不同的“交叉比例”（threshold），来触发相应的回调函数。

二、为什么要用它？

你可能会问，我用scroll事件监听滚动条，然后计算元素的位置，不也能实现类似的功能吗？

当然可以，但那样做效率很低。scroll事件触发太频繁了，每次滚动都会执行你的计算逻辑，浪费CPU资源。而且，自己计算元素位置也很麻烦，要考虑各种浏览器的兼容性。

Intersection Observer的优势在于：

异步检测： 不会阻塞主线程，性能更好。
浏览器原生支持： 无需引入第三方库，减少代码体积。
简单易用： API简洁明了，易于上手。
精准： 可以设置不同的threshold，精确控制触发时机。

三、Intersection Observer的基本用法

咱们先来看看Intersection Observer的基本用法。

1. 创建Intersection Observer实例

const observer = new IntersectionObserver(callback, options);

callback: 当目标元素与根元素（通常是视口）交叉状态发生改变时，会执行这个回调函数。
options: 一个配置对象，用于设置观察器的行为，比如根元素、交叉比例等。

2. 观察目标元素

const targetElement = document.querySelector('.my-element');
observer.observe(targetElement);

3. 回调函数callback

回调函数接收两个参数：

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

IntersectionObserverEntry对象包含以下属性：

boundingClientRect: 目标元素的边界矩形信息。
intersectionRatio: 目标元素与根元素的交叉比例，取值范围为0到1。0表示完全不相交，1表示完全相交。
intersectionRect: 目标元素与根元素的交叉区域的矩形信息。
isIntersecting: 一个布尔值，表示目标元素是否与根元素相交。
rootBounds: 根元素的边界矩形信息。
target: 目标元素。
time: 交叉发生的时间戳。

4. 取消观察

当你不再需要观察某个元素时，可以调用unobserve()方法：

observer.unobserve(targetElement);

如果想取消观察所有元素，可以调用disconnect()方法：

observer.disconnect();

四、options配置对象详解

options对象可以设置以下属性：

root: 根元素。默认是视口（null），你可以指定一个DOM元素作为根元素。例如，你可以让一个div元素内部的滚动条作为根元素。
rootMargin: 根元素的边距。可以用来增大或缩小根元素的范围。它的值类似于CSS的margin属性，例如"10px 0px 20px 0px"。
threshold: 交叉比例。可以是一个数字，也可以是一个数组。如果是数字，表示当目标元素与根元素的交叉比例达到这个值时，就会触发回调函数。如果是数组，表示当交叉比例达到数组中的任何一个值时，都会触发回调函数。例如[0, 0.25, 0.5, 0.75, 1]表示当目标元素进入视口0%、25%、50%、75%和100%时，都会触发回调函数。

五、实战演练：懒加载图片

现在，咱们来用Intersection Observer实现一个懒加载图片的例子。

HTML结构：

<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">
<!-- 更多图片 -->

注意，图片的src属性一开始是空的，真正的图片地址放在data-src属性中。

JavaScript代码：

const lazyLoadImages = 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类，可以用来添加过渡效果
      };
      observer.unobserve(img); // 加载完图片后，取消观察
    }
  });
});

lazyLoadImages.forEach(img => {
  observer.observe(img);
});

CSS代码（可选，用于添加过渡效果）：

.lazy-load {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.lazy-load.loaded {
  opacity: 1;
}

这段代码的逻辑是：

获取所有带有lazy-load类的图片元素。
创建一个Intersection Observer实例。
定义回调函数，当图片进入视口时，将data-src属性的值赋给src属性，加载图片。
图片加载完成后，添加loaded类，并取消对该图片的观察。
遍历所有图片，开始观察。

六、实战演练：无限滚动

接下来，咱们来实现一个无限滚动的例子。

HTML结构：

<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>

load-more元素用于触发加载更多数据的操作。

JavaScript代码：

const content = document.getElementById('content');
const loadMore = document.getElementById('load-more');
let page = 1; // 初始页码
let loading = false; // 防止重复加载

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting && !loading) {
      loading = true;
      loadData(page++)
        .then(newData => {
          newData.forEach(item => {
            const div = document.createElement('div');
            div.classList.add('item');
            div.textContent = item;
            content.appendChild(div);
          });
          loading = false;
          if (newData.length === 0) {
            // 没有更多数据了，取消观察
            observer.unobserve(loadMore);
            loadMore.textContent = 'No more data.';
          }
        })
        .catch(error => {
          console.error('Error loading data:', error);
          loading = false;
          loadMore.textContent = 'Error loading data.';
        });
    }
  });
});

observer.observe(loadMore);

// 模拟加载数据的函数
function loadData(page) {
  return new Promise(resolve => {
    setTimeout(() => {
      const newData = Array.from({ length: 10 }, (_, i) => `Item ${page * 10 + i + 1}`);
      resolve(newData);
    }, 500); // 模拟网络延迟
  });
}

这段代码的逻辑是：

获取content和load-more元素。
创建一个Intersection Observer实例，观察load-more元素。
当load-more元素进入视口且没有正在加载数据时，调用loadData()函数加载更多数据。
loadData()函数模拟从服务器获取数据，并将新数据添加到content元素中。
如果加载的数据为空，表示没有更多数据了，取消对load-more元素的观察，并显示“No more data.”。

七、进阶技巧

使用rootMargin调整触发时机： rootMargin可以让你在元素进入视口之前或之后触发回调函数。例如，你可以设置rootMargin: "100px"，让元素距离视口底部100px时就触发回调函数，实现预加载的效果。
动态创建Intersection Observer实例： 你可以根据不同的需求，动态创建多个Intersection Observer实例，观察不同的元素。
结合requestAnimationFrame优化性能： 在回调函数中，尽量避免进行耗时的操作。如果需要进行DOM操作，可以结合requestAnimationFrame，将操作放到下一个动画帧中执行，避免阻塞主线程。

八、兼容性问题

Intersection Observer的兼容性还是不错的，主流浏览器都支持。但是，为了兼容老版本的浏览器，你可以使用polyfill。

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

九、一些需要注意的点

避免循环引用： 在回调函数中，不要直接修改IntersectionObserver实例本身，否则可能会导致循环引用，造成内存泄漏。
及时取消观察： 当你不再需要观察某个元素时，一定要及时取消观察，释放资源。
处理错误： 在加载数据时，一定要处理错误，避免程序崩溃。

十、总结

Intersection Observer是一个非常强大的API，可以让你轻松地实现懒加载、无限滚动等功能，提高网站的性能和用户体验。

希望通过今天的讲解，你已经对Intersection Observer有了更深入的了解。

最后，记住一句真理：代码虐我千百遍，我待代码如初恋。

感谢大家的观看，咱们下期再见！

发表回复 取消回复

发表回复取消回复