本文探讨了懒加载技术的原理和益处，重点分析了使用IntersectionObserver API时遇到的兼容性问题，特别是在iOS和部分国产安卓设备上的表现。作者列举了可能遇到的困难，如在某些浏览器中isIntersecting属性返回undefined，并分享了主流库如何应对这个问题。文章还提出了在业务场景中考虑IntersectionObserver使用的几个关键因素，包括用户群体、运营态度、时间和测试资源。最后，作者提出了一种结合IntersectionObserver和getBoundingClientRect + throttle的兼容性解决方案。
懒加载核心实现之intersectionobserver 交叉观察器踩坑
前言
懒加载是一种对网页性能优化的方式，它的原理是除了首屏资源，部分资源在浏览器滚动时出现在可视区域内的再惰性加载，而不一次性加载所有。这样做对网页性能以及用户体验都有提升。
如果你的懒加载方案是基于 intersectionobserver API ，出现懒加载失效页面空白等问题，那大部分是 IntersectionObserver 兼容性导致的。polyfill 只能解决大部分兼容性问题，polyfill 或许目前还不是最优解。
浏览器的兼容情况
可以看出对 ios 兼容并不友好，对部分国产安卓机（具体到机型的系统版本我记不太清）兼容也不友好。
你可能会遇到的兼容性问题
IntersectionObserver 不支持会直接返回 undefined，那需要引 polyfill 。但这样万无一失了吗？
不，有些浏览器虽然实现了 IntersectionObserver&#
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
