why
之前图片懒加载的实现方法大多数为：给window添加scroll事件，滚动时获取元素的offset值，判断元素在viewport内的可见行。这样做的缺点是：频繁的计算dom节点的属性导致性能较差，对scroll绑定的回调函数进行节流能减少计算，由于兼容性等原因，这是目前较为主流的实现方法。为了更好的解决性能问题而引入了IntersectionObserver。
how
IntersectionObserver直译为 “交叉观测器”。假设你需要观测的元素observedElement，被用来做参照的元素为window，他通过监测observedElement与window的交叉大小来判断该元素是否是可见还是不可见，当可见行发生改变时出发回调，然后就可以做羞羞的事情了。
- 第一步创建观测器：
var intersectionObserver = new IntersectionObserver(callback, option);IntersectionObserver为浏览器原生构造方法，callback为监听的元素发生变化时的回调函数，option为可选配置。这里你可能会问，在哪里配置需要监听的元素呢? 请接着往下看。
- 第二步添加观测元素
let observedElement = document(selector);
intersectionObserver.observe(element);demo
let intersectionObserver = new IntersectionObserver(entries => {let entry = entries[0];let isVisible = entries[0].intersectionRatio <= 0;console.log(isVisible);
});
intersectionObserver.observe(document.querySelector('.lazy'));到现在为止我们的非常简单的程序就算写完了。
API
- 创建观测器
let interObserver = new IntersectionObserver(callback, [option]);
@params callback 可见性变化时的回调函数
@params option 可选的配置对象
@return Object 返回一个观察器实例。实例的observe方法可以指定观察哪个DOM节点- 添加观测元素
@mark 添加多个元素需要分别多次执行
interObserver.observe(element);- 停止观察
interObserver.unobserve(element);- 关闭观测器
interObserver.disconnect();实践
- 图片懒加载插件
