IntersectionObserve API使用

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();

实践

• 图片懒加载插件

转载于:https://www.cnblogs.com/gaollard/p/8390543.html