深入浅出详解Intersection Observer交叉观察器 API

原文地址：原文连接

一、前言

过去，要检测一个元素是否可见或者两个元素是否相交并不容易，很多解决办法不可靠或性能很差。然而，随着互联网的发展，这种需求却与日俱增，比如，下面这些情况都需要用到相交检测：
在页面滚动时“懒加载”图像或其他内容。
实现“无限滚动”网站，在滚动过程中加载和显示越来越多的内容，这样用户就不必翻页了。
报告广告的可见度，以便计算广告收入。
根据用户是否能看到结果来决定是否执行任务或动画进程。
视频的播放和暂停。

过去实施相交检测时，需要调用事件处理程序和循环方法，如 Element.getBoundingClientRect() 来为每个受影响的元素建立所需的信息。由于所有这些代码都在主线程上运行，因此即使是其中的一行代码也会导致性能问题。当网站加载这些程序时，情况会变得非常糟糕，体验非常不好。

直到 Intersection Observer API 的出现！

Intersection Observer API（交叉观察器API）是一种JavaScript的API，它提供了一种异步观察目标元素与祖先元素（或顶级文档的视口）交叉状态变化的方法。这个API主要用于高效解决在网页开发中需要频繁判断元素是否进入“视口”（viewport）的问题，比如实现懒加载、无限滚动、可视化统计、视频播放等交互效果，同时减少性能开销，提升用户体验。

二、基本用法

交叉观察器 API 允许你配置一个回调函数，当以下情况发生时会被调用：

目标元素与设备视口或指定元素相交。在交叉观察器 API 中，指定元素被称为根元素或根。

观察器（Observer）第一次监听观察目标元素。

通常情况下，需要观察目标元素最近的可滚动祖先的交集变化，如果目标元素不是可滚动元素的后代，则需要观察设备视口的交集变化。要观察相对于设备视口的交集，请为 root 选项指定 null。无论你是使用视口还是其他元素作为根元素，API 的工作方式都是一样的，只要目标元素的可见性发生变化，与根元素的交集达到所需的程度，就会执行你提供的回调函数。

目标元素与其根元素的交集程度就是交叉比。它表示目标元素可见的百分比，数值介于 0.0 和 1.0 之间。

2.1 创建交叉观察器
通过调用 IntersectionObserver 构造函数，创建交叉观测器，并将回调函数传给它，当一个方向或另一个方向越过阈值时，就运行该函数。

let options = {root: document.querySelector("#scrollArea"),rootMargin: "0px",threshold: 1.0,
};let observer = new IntersectionObserver(callback, options);

传递到 IntersectionObserver() 构造函数的 options 对象，可以控制在什么情况下调用观察器的回调。它有以下字段：

root：用作视口的元素，用于检查目标的可见性。必须是目标的祖先。如果未指定或为 null，则默认为浏览器视口。

rootMargin：根周围的边距。其值可以类似于 CSS margin 属性，例如 “10px 20px 30px 40px”（上、右、下、左）。这些值可以是百分比。在计算交叉点之前，这组值用于增大或缩小根元素边框的每一侧。默认值为全零。

threshold：一个数字或一个数字数组，表示目标可见度达到多少百分比时，观察器的回调就应该执行。如果只想在能见度超过 50% 时检测，可以使用 0.5 的值。如果希望每次能见度超过 25% 时都执行回调，则需要指定数组 [0, 0.25, 0.5, 0.75, 1]。默认值为 0，这意味着只要有一个像素可见，回调就会运行。值为 1.0 意味着在每个像素都可见之前，阈值不会被认为已通过。

2.2 回调函数
回调函数在交叉状态变化时执行，接收两个参数：一个entries数组和一个observer对象。entries数组中的每个元素都是一个IntersectionObserverEntry对象，表示目标元素与根元素的交叉状态信息。

const callback = (entries, observer) => {  entries.forEach(entry => {  if (entry.isIntersecting) {  // 元素进入视口  doSomething()} else {  // 元素离开视口  doSomething() }  });  
};

以图片懒加载为例(见下文)：

图片元素进入视口entries的信息：

图片元素未进入或离开视口entries的信息：
在这里插入图片描述

observer打印信息：在这里插入图片描述

2.3 观察目标元素

const ob = new IntersectionObserver();
ob.observe(targetElement);

使用observe方法将目标元素添加到观察器的观察列表中，targetElement代表需要被观察的目标元素。

2.4 停止观察
如果需要停止观察某个目标元素，可以使用unobserve方法。

const ob = new IntersectionObserver();
ob.unobserve(targetElement);

2.5 终止所有观察
disconnect()方法终止对所有目标元素可见性变化的观察。

const ob = new IntersectionObserver();
ob.disconnect();

2.6 IntersectionObserverEntry对象

boundingClientRect：目标元素的矩形区域的信息。
intersectionRatio：目标元素的可见比例，即intersectionRect占boundingClientRect的比例。
intersectionRect：目标元素与视口（或根元素）的交叉区域的信息。
rootBounds：根元素的矩形区域的信息。
isIntersecting：目标元素是否与视口（或根元素）交叉。
target：被观察的目标元素。
time：可见性发生变化的时间戳。

三、实现图片懒加载功能

<div class="container"><div class="img-item"><img src="./img/default.png" alt="" data-src="./girl/img-1.jpeg" /></div><div class="img-item"><img src="./img/default.png" alt="" data-src="./girl/img-2.jpeg" /></div><div class="img-item"><img src="./img/default.png" alt="" data-src="./girl/img-3.jpeg" /></div>//还有好多张的......
</div>
.container {width: 900px;margin: 0 auto;
}
.container .img-item {display: inline-block;width: 17%;height: 200px;margin: 10px 1%;
}
.container .img-item img {width: 100%;height: 100%;
}

data-src 属性是真实图片的URL，而 img 标签的 src 属性是默认图片占位符。

const options = {root: null,// rootMargin: '0px',threshold: 0.5
}
// 创建观察器
const ob = new IntersectionObserver((entries, observer) => {// 循环每个元素观察其状态for (const entry of entries) {// 元素进入视口if(entry.isIntersecting) {const img = entry.target;// 把data-src的值赋值给srcimg.src = img.dataset.src;// 已经给src赋过值的，停止观察改元素ob.unobserve(img);}}
}, options);// 获取所有懒加载元素
const imgs = document.querySelectorAll('img[data-src]');
// 循环给每个懒加载元素添加观察器
imgs.forEach(item => {ob.observe(item);
})

在这里插入图片描述

四、实现滚动加载更多

创建观察器，获取页面下方加载更多的loading元素，并给该元素添加到观察器中，当观察到下面加载更多的loading元素进入视口，调用loadMoreImages方法加载更多图片。

// 调用接口请求图片
let imgList = [];
async function loadMoreImages(size = 10) {// 加入返回的结果为res.dataimgList = [...imgList, ...res.data];isLoading = false;
}
loadMoreImages(10)//创建观察器
const ob = new IntersectionObserver((entries) => {// 当获取加载更多的loading元素进入视口，调用loadMoreImages方法const entry = entries[0];if(entry.isIntersecting) {loadMoreImages(10)}
}, {threshold: 0
})// 获取加载更多的loading元素
const spin = document.querySelector('.spin');
ob.observe()

五、实现视频自动播放

经常刷某日头条、某瓜视频等网页时，留心观察会发现，当视频完全进入视口或部分进入视口时视频自动播放，当视频离开视口部分时会停止播放。使用Intersection Observer API实现这个效果就相当容易了。

<!DOCTYPE html>
<html><head><style>video {width: 100%;height: 500px;margin-bottom: 20px;}</style></head><body><video controls loop><source src="./video/video-1.mov" type="video/mp4"></video><video controls loop><source src="./video/video-4.mov" type="video/mp4"></video><video controls loop><source src="./video/video-3.mov" type="video/mp4"></video></body><script type="text/javascript">const videos = document.querySelectorAll('video');//创建观察器const ob = new IntersectionObserver((entries) => {for (const entry of entries) {// 视频完整进入视口开始播放，完全离开视口停止播放const video = entry.target;if (entry.isIntersecting) {video.play();} else {video.pause();}}}, {threshold: 1})videos.forEach(vdo => {ob.observe(vdo);})</script>
</html>