ppt免费模板下载网站有哪些,wordpress微信群多个二维码,WordPress用php7,如皋市城乡建设局网站why 之前图片懒加载的实现方法大多数为#xff1a;给window添加scroll事件#xff0c;滚动时获取元素的offset值#xff0c;判断元素在viewport内的可见行。这样做的缺点是#xff1a;频繁的计算dom节点的属性导致性能较差#xff0c;对scroll绑定的回调函数进行节流能减少…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
