无需登录 数据私有 本地保存

交叉观察器应用演示 - 滚动曝光与懒加载

10
0
0
0

交叉观察器演示

使用 Intersection Observer API 实时追踪元素曝光，支持滚动曝光统计与懒加载演示。调整参数观察不同配置下的行为变化。

0
任意部分进入即触发
正值=提前触发，负值=延迟触发
配置更改后需点击"应用配置"生效。观察目标分布在下方页面中，滚动页面查看变化。
15
观察目标总数
0
当前可见
0
完全可见(ratio=1)
0
累计曝光次数
0/6
懒加载完成
● 运行中
Observer状态
观察目标列表（滚动页面查看变化）
继续滚动查看懒加载演示
实时状态面板 点击跳转
等待Observer初始化...
懒加载图片演示（独立Observer，threshold=0, rootMargin=200px）

以下图片初始显示占位骨架屏，当滚动到距离视口200px时开始加载。每张图片加载完成后会有淡入效果。

常见问题与知识点

Intersection Observer API 是一种异步观察目标元素与祖先元素或浏览器视口交叉状态变化的机制。相比传统的 scroll 事件监听，它性能更高，因为浏览器可以在底层优化回调的执行时机，避免主线程频繁计算布局。常用于懒加载、无限滚动、广告曝光统计、元素进入/离开视口动画等场景。

threshold 指定了目标元素可见比例达到多少时触发回调。取值范围 0~1（也支持数组如 [0, 0.5, 1]）。
• threshold: 0 — 元素任意1个像素进入视口即触发（最灵敏）
• threshold: 0.5 — 元素50%面积进入视口时触发
• threshold: 1 — 元素100%完全进入视口才触发
使用数组可在多个比例节点获得回调，适合精细追踪曝光进度。

rootMargin 在视口（或root元素）的边界上扩展一个虚拟的外边距，语法与CSS margin一致。
• 正值（如 100px 或 200px 0px）— 视口向外扩展，元素在进入视口前100px就开始触发（适合懒加载预加载）
• 负值（如 -50px）— 视口向内收缩，元素需要更深入视口才触发
这是实现"提前加载"的关键参数。

• 性能更优：Observer 是异步的，浏览器批量处理回调，避免频繁触发和强制同步布局（layout thrashing）
• 代码更简洁：无需手动计算元素位置（getBoundingClientRect）、监听resize/scroll
• 更精确：threshold 和 rootMargin 提供细粒度控制
• 支持iframe：可观察跨域iframe内的元素交叉状态

Intersection Observer API 在主流现代浏览器中均有良好支持：Chrome 51+、Firefox 55+、Safari 12.1+、Edge 15+、Opera 38+。对于需要兼容旧版浏览器（如IE）的项目，可使用 官方polyfill。

• isIntersecting：布尔值，表示目标元素是否有任意部分与视口交叉（等价于 ratio > 0）
• intersectionRatio：0~1的浮点数，表示目标元素可见部分占自身总面积的比例
例如一个元素50%在视口内，isIntersecting=true，intersectionRatio≈0.5。

• 图片/iframe懒加载：进入视口前提前加载资源
• 无限滚动：底部哨兵元素进入视口时加载更多内容
• 广告曝光统计：广告元素可见一定比例且持续一定时间计为有效曝光
• 滚动动画触发：元素进入视口时播放进入动画
• 目录导航高亮：根据阅读位置高亮对应目录项
• 性能优化：离开视口的元素暂停动画或降低更新频率

可以在 Observer 回调中结合计时器实现：当 isIntersecting 变为 true 时启动一个 2 秒定时器，如果 2 秒内元素离开视口则取消定时器，定时器到期后才执行曝光计数逻辑。这种模式常见于广告可见性标准（如IAB的50%可见+1秒持续）。
🔧 相关工具