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 触发，避免用户看到空白再加载
无限滚动加载
像信息流、商品列表这种内容不断往下延伸的场景，靠它判断“底部加载提示”是否出现，从而拉取下一页数据。
- 监听一个占位元素（比如
）是否进入视口 - 触发后请求新数据，插入 DOM，再重新 observe 新的 loader（或复用）
- 注意防重复请求：可加 loading 状态锁，或在请求中 unobserve，成功后再重新 observe
滚动动画与曝光统计
让元素“动起来”或记录“有没有被看到”，都依赖可见性判断。
立即学习“Java免费学习笔记（深入）”；
- 动画：当 intersectionRatio > 0 时添加动画 class；配合 threshold: [0, 0.25, 0.5] 可做分段触发动画
- 广告/内容曝光：比如要求“至少 50% 面积可见 1 秒以上”才记一次曝光，用 intersectionRatio >= 0.5 判断
- 记得及时 unobserve 已处理完的元素，避免内存泄漏和重复执行
基本上就这些。它不是万能的，但对“要不要现在干活”这类判断，比手动监听 scroll + getBoundingClientRect 稳定太多。
