Javascript中的Intersection Observer API有什么用？

Intersection Observer API 用于高效监听元素进入/离开视口，适用于图片懒加载（data-src→src）、无限滚动（监听loader触发分页）、滚动动画（按intersectionRatio添加class）和曝光统计（如50%可见1秒），需及时unobserve防泄漏。

Intersection Observer API 主要用来监听一个元素是否进入或离开视口（或某个容器），不卡主线程，性能好、写法简洁。

图片懒加载

页面中大量图片时，不用一打开就全加载。等用户快滚动到某张图的位置，再触发加载真实图片。

• 给图片加 data-src 存真实地址，src 先留空或放占位图
• 用 observer 监听，一旦 entry.isIntersecting 为 true，就赋值 src 并调用 unobserve 停止监听
• 常用 rootMargin: '200px' 提前 200px 触发，避免用户看到空白再加载

无限滚动加载

像信息流、商品列表这种内容不断往下延伸的场景，靠它判断“底部加载提示”是否出现，从而拉取下一页数据。

• 监听一个占位元素（比如 <p id="loader"></p>）是否进入视口
• 触发后请求新数据，插入 DOM，再重新 observe 新的 loader（或复用）
• 注意防重复请求：可加 loading 状态锁，或在请求中 unobserve，成功后再重新 observe

滚动动画与曝光统计

让元素“动起来”或记录“有没有被看到”，都依赖可见性判断。

标签： javascript java 懒加载