node建站笔记之图片懒加载
前端网站优化的方法有很多,其中一个方法就是图片懒加载,顾名思义,图片懒加载是在各个dom节点渲染的时候不加载图片,等到图片的位置出现在窗口时再进行加载。
实现懒加载比较常见的一个方式是通过监听scroll滚动的高度并计算与图片元素之间的距离判断图片是否出现在可见范围并进行相应操作。然而这样做的坏处就是性能太差,,每一次滚动都会触发判断函数,而且滚动的时间间隔很小,一秒钟就要做好多次判断,图片资源如果很多的话这样无疑会给电脑性能造成很大影响。
IntersectionObserver实现懒加载
IntersectionObserver.disconnect()
使IntersectionObserver对象停止监听工作。
IntersectionObserver.observe()
使IntersectionObserver开始监听一个目标元素。
IntersectionObserver.takeRecords()
返回所有观察目标的IntersectionObserverEntry对象数组。
IntersectionObserver.unobserve()
使IntersectionObserver停止监听特定目标元素。
现在我们给全局图片设置懒加载。注意:实现该方法的前提是dom
节点中的img
节点要有一个data
元素保存src
的真值,而src
元素中的的值应该置为空,或者设置为loading图片
比如
<img src ="/loading.gif" data-src ="/图片连接">
懒加载的js代码
代码很简洁相比监听scroll方法在逻辑上也比较清晰(如果看得懂函数用法的话)
// query函数查询所有的img节点
function query(tag) {
return Array.from(document.getElementsByTagName(tag));
}
// observerimg对象为一个IntersectionObserver对象
var observerimg = new IntersectionObserver(
(changes) => {
changes.forEach((change) => {
if (change.intersectionRatio > 0) {
var img = change.target;
if(img.dataset.src != undefined){
img.src = img.dataset.src;
}
observerimg.unobserve(img);
}
})
}
)
// 查询所有img节点并添加监听函数
query("img").forEach((item) => {
observerimg.observe(item);
})
好了,没什么好说了,继续学去了。

最近文章