Intersection Observer API用于监听元素是否进入视口，支持懒加载、动画触发和埋点上报。通过创建observer实例并配置threshold、rootMargin等参数，可在元素可见时执行回调，相比scroll事件更高效。典型应用包括图片懒加载（读取data-src）、视入动画（添加类名）和内容曝光统计（上报埋点）。需注意兼容性处理、及时调用unobserve()和disconnect()释放资源。该API简化了可见性检测逻辑，提升性能与可维护性。
Intersection Observer 是浏览器提供的 API，用来监听某个元素是否进入或离开视口（viewport），或者另一个容器。它比传统的 scroll 事件 + getBoundingClientRect() 手动计算要高效得多，特别适合实现懒加载、无限滚动、埋点上报等场景。
基本用法
创建一个 IntersectionObserver 实例，传入回调函数和配置项：
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
console.log('元素可见', entry.target);
// 可以在这里加载图片、触发动画等
}
});
}, {
threshold: 0.1, // 元素10%可见时触发
rootMargin: '0px' // 可添加外边距，如 '50px'
});
// 开始观察某个元素
observer.observe(document.querySelector('#my-element'));
说明：
- entries：是所有被监听元素的状态数组，每个 entry 包含 isIntersecting（是否相交）、intersectionRatio（交叉比例）等信息。
- threshold：可以是 0 到 1 的数值或数组，表示触发回调的交叉比例。设为 0 表示一有交集就触发，1 表示完全可见才触发。
- root：指定根容器，默认是浏览器视口。也可设为某个 DOM 元素。
- rootMargin：类似 CSS margin，可扩大或缩小根容器范围，常用于提前触发加载。
常见应用场景
这个 API 非常实用，以下是几个典型用法：
1. 图片懒加载页面初始只加载占位图，当图片区域进入视口再加载真实图片：
const imgObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src; // 将 data-src 赋值给 src
imgObserver.unobserve(img); // 加载后停止监听
}
});
});
document.querySelectorAll('img[data-src]').forEach(img => {
imgObserver.observe(img);
});
2. 触发进入动画
当某个模块滑入视野时，添加“显示”类名来触发动画：
const animateObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('fade-in');
animateObserver.unobserve(entry.target);
}
});
}, { threshold: 0.2 });
document.querySelectorAll('.animate').forEach(el => {
animateObserver.observe(el);
});
3. 监听广告或内容曝光
用于统计用户是否“看到”了某块内容，适合做埋点：
const trackObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
// 内容至少50%可见，上报一次
ga('send', 'event', 'content', 'view', entry.target.id);
trackObserver.unobserve(entry.target); // 只上报一次
}
});
}, { threshold: 0.5 });
注意事项与优化
虽然 Intersection Observer 很强大，但使用时也要注意几点：
- 老版本浏览器（如 IE）不支持，需要引入 polyfill。
- 回调函数运行在主线程之外，不会阻塞渲染，性能优秀。
- 记得调用 unobserve() 避免重复触发，尤其是懒加载或一次性动画。
- 如果频繁增删元素，建议在组件销毁时调用 observer.disconnect() 清理所有监听。
基本上就这些。Intersection Observer 让我们摆脱了复杂的滚动监听计算，代码更简洁，性能也更好。只要涉及“元素是否可见”的判断，优先考虑它。
