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 稳定太多。
以上就是Javascript中的Intersection Observer API有什么用？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1542675.html
微信扫一扫 
支付宝扫一扫 
