当前位置：首页 > web >正文

`IntersectionObserver`延迟加载不在首屏的自动播放视频/图片/埋点/

web 2025/9/7 11:04:03

IntersectionObserver 是非常实用的浏览器 API，用来监听元素是否进入/离开视口（viewport）或某个容器。它让我们不用频繁写 scroll 事件，提高性能。

let observer = new IntersectionObserver(callback, options)

callback：当被观察元素进入或离开视口时触发，返回 entries（被观察的元素状态数组）。

options：配置对象：

root：观察的容器（默认是 viewport）。
rootMargin：扩展/收缩 root 的边距（类似 margin，支持 “10px 20px”）。
threshold：触发回调的阈值，可以是 0~1 的数或数组。

isIntersecting

类型：Boolean

含义：目标元素和根容器是否相交（哪怕相交 1 个像素，也算 true）。

常用来判断元素是否进入视口（或指定容器）。

callback

const observer = new IntersectionObserver(callback, options)function callback(entries, observer) {// entries: IntersectionObserverEntry[] // observer: IntersectionObserver 实例本身
}

entries：一个数组，里面是若干个 IntersectionObserverEntry 对象（每个被观察的元素对应一个）。

observer：当前的 IntersectionObserver 实例（很少直接用，但可以在里面调用 unobserve 或 disconnect）。

const box = document.querySelector('.box')const observer = new IntersectionObserver((entries, observer) => {entries.forEach(entry => {console.log('被观察元素:', entry.target)console.log('是否可见:', entry.isIntersecting)console.log('可见比例:', entry.intersectionRatio)console.log('目标矩形:', entry.boundingClientRect)console.log('可见区域:', entry.intersectionRect)console.log('根容器矩形:', entry.rootBounds)console.log('时间戳:', entry.time)// 可选：停止观察if (entry.isIntersecting) {observer.unobserve(entry.target)}})
}, { threshold: [0, 0.5, 1] })observer.observe(box)

场景举例

图片懒加载：用 entry.isIntersecting 判断是否进入视口。

曝光统计：用 entry.intersectionRatio >= 0.5 表示“至少一半可见”。

动画触发：用 entry.isIntersecting 为 true 时加 className 启动动画。

图片懒加载

<img data-src="big-image.jpg" alt="demo" width="600" height="400">
<script>
const img = document.querySelector('img');const observer = new IntersectionObserver((entries, observer) => {entries.forEach(entry => {if(entry.isIntersecting) {// 替换真实图片地址entry.target.src = entry.target.dataset.src;observer.unobserve(entry.target); // 加载后不再观察}});
});observer.observe(img);
</script>

无限滚动加载更多数据

const sentinel = document.querySelector('#sentinel'); // 页面底部的触发点const observer = new IntersectionObserver(entries => {if(entries[0].isIntersecting) {loadMoreData(); // 加载更多数据}
});observer.observe(sentinel);

元素曝光统计（广告/埋点）

const boxes = document.querySelectorAll('.ad');const observer = new IntersectionObserver(entries => {entries.forEach(entry => {if(entry.isIntersecting) {console.log('广告被看到:', entry.target);observer.unobserve(entry.target); // 只记录一次}});
}, { threshold: 0.5 }); // 一半区域可见时算曝光boxes.forEach(box => observer.observe(box));