懒加载核心实现之intersectionobserver 交叉观察器踩坑

前言

懒加载是一种对网页性能优化的方式，它的原理是除了首屏资源，部分资源在浏览器滚动时出现在可视区域内的再惰性加载，而不一次性加载所有。这样做对网页性能以及用户体验都有提升。

如果你的懒加载方案是基于 intersectionobserver API ，出现懒加载失效页面空白等问题，那大部分是 IntersectionObserver 兼容性导致的。polyfill 只能解决大部分兼容性问题，polyfill 或许目前还不是最优解。

浏览器的兼容情况

可以看出对 ios 兼容并不友好，对部分国产安卓机（具体到机型的系统版本我记不太清）兼容也不友好。

你可能会遇到的兼容性问题

IntersectionObserver 不支持会直接返回 undefined，那需要引 polyfill 。但这样万无一失了吗？

不，有些浏览器虽然实现了 IntersectionObserver， 但 isIntersectin