node建站笔记之图片懒加载

前端网站优化的方法有很多，其中一个方法就是图片懒加载，顾名思义，图片懒加载是在各个dom节点渲染的时候不加载图片，等到图片的位置出现在窗口时再进行加载。

实现懒加载比较常见的一个方式是通过监听scroll滚动的高度并计算与图片元素之间的距离判断图片是否出现在可见范围并进行相应操作。然而这样做的坏处就是性能太差，，每一次滚动都会触发判断函数，而且滚动的时间间隔很小，一秒钟就要做好多次判断，图片资源如果很多的话这样无疑会给电脑性能造成很大影响。

IntersectionObserver实现懒加载

IntersectionObserver是html5的一个新api，我也是今天才刚听说这个东西，还挺有用，它可以自动监听元素是否出现在可见范围，虽然不知道它的实现原理和scroll方法相比是否相同，但是毕竟新玩意，尝试一下再说。

它有四个成员方法

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

好了，没什么好说了，继续学去了。