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 让我们摆脱了复杂的滚动监听计算，代码更简洁，性能也更好。只要涉及“元素是否可见”的判断，优先考虑它。
以上就是浏览器API_Intersection Observer使用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1539260.html
微信扫一扫 
支付宝扫一扫 
