第5期 图片懒加载

什么是懒加载

当页面图片很多的时候，页面加载速度慢，可能会流失用户。所以我们先加载用户可视区域的图片，其他的区域我们可以等到用户即将浏览的时候再去加载。这样不仅可以提高用户体验还可以节省用户流量，毕竟有些图片可能根本不会被浏览到。

懒加载的原理

平时我们展示图片如下，src即我们要请求的图片资源。 然后浏览器会自动帮我们去请求资源，所以我们可以将src设置成一个统一的默认的图片，然后设置data-origin为我们要展示的图片。当页面进行滚动的时候我们就进行可视区域的计算，判断什么时候将src的值替换成data-origin，然后进行请求。

<img src="xxx" data-origin="xxx">

当然还有背景图片，原理都是一样的。

懒加载实现代码

此处参照Jakeeee的代码举个例子。

<script>
    var num = document.getElementsByTagName('img').length;
    var img = document.getElementsByTagName("img");
    var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历

    lazyload(); //页面载入完毕加载可是区域内的图片

    window.onscroll = lazyload;

    function lazyload() { //监听页面滚动事件
        var seeHeight = document.documentElement.clientHeight; //可见区域高度
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度
        for (var i = n; i < num; i++) {
            if (img[i].offsetTop < seeHeight + scrollTop) {
                if (img[i].getAttribute("src") == "default.jpg") {
                    img[i].src = img[i].getAttribute("data-src");
                }
                n = i + 1;
            }
        }
    }
</script>

作者：Jakeeee
链接：https://juejin.cn/post/6844903455048335368
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。