如何实现图片懒加载

最新推荐文章于 2023-08-28 13:55:17 发布

原创最新推荐文章于 2023-08-28 13:55:17 发布 · 225 阅读

0 ·

CC 4.0 BY-SA版权

ES6学习笔记专栏收录该内容

38 篇文章

订阅专栏

1、什么是懒加载？为什么要实现图片懒加载？

所谓“懒加载”，就是延迟加载的意思，比如我们加载一个页面，这个页面很长很长，长到我们的浏览器可视区域装不下，那么懒加载就是优先加载可视区域的内容，其他部分等进入了可视区域在加载。懒加载是一种网页性能优化的方式，它能极大的提升用户体验。就比如说图片，图片一直是影响网页性能的主要元凶，现在一张图片超过几兆已经是很经常的事了。如果每次进入页面就请求所有的图片资源，那么可能等图片加载出来用户也早就走了。所以，我们需要懒加载，进入页面的时候，只请求可视区域的图片资源。

总结出来就两个点：

1.全部加载的话会影响用户体验

2.浪费用户的流量，有些用户并不像全部看完，全部加载会耗费大量流量。

2、实现原理

1、所有图片地址src，用自定义属性保存地址，
2、当所需要的图片进入浏览器窗口视野之后，将图片地址src替换为真实的图片地址。

document.documentElement.clientHeight//获取屏幕可视区域的高度
document.documentElement.clientWidth//获取屏幕可视区域的宽度
element.offsetTop//获取元素相对于文档顶部的高度  
                 //offset为只读属性，它返回当前元素相对于其offsetParent元素的顶部的距离
document.documentElement.scrollTop//获取浏览器窗口顶部与文档顶部之间的距离，也就是滚动条滚动的距离 
                                  //Element.scrollTop属性可以获取或者设置一个元素的内容垂直滚动的像素数
                                   //一个元素的scrollTop值是这个元素的顶部到视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的scrollTop值为0

参考知乎：https://zhuanlan.zhihu.com/p/55311726 可以比较详细的了解这些距离

3、js实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片懒加载</title>
    <style>
        img {
            display: block;
            width: 100%;
            height: 300px;
            margin-bottom: 20px;
        }
        #floatimg{
            float: left;
        }
    </style>
</head>
<body>
    <img id="floatimg" data-src="./images/1.jpg" alt="">
    <img data-src="./images/2.jpg" alt="">
    <img data-src="./images/3.jpg" alt="">
    <img data-src="./images/4.jpg" alt="">
    <img data-src="./images/5.jpg" alt="">
    <img data-src="./images/6.jpg" alt="">
    <img data-src="./images/7.jpg" alt="">
    <img data-src="./images/8.jpg" alt="">
    <img data-src="./images/9.jpg" alt="">
    <img data-src="./images/10.jpg" alt="">
    <img data-src="./images/1.jpg" alt="">
    <img data-src="./images/2.jpg" alt="">
</body>
<script>
        //获取图片标签数组
        var imgs = document.querySelectorAll('img');

        //offsetTop是元素与offsetParent的距离，循环获取直到页面顶部
        function getTop(e) {
            var T = e.offsetTop;
            while(e = e.offsetParent) {
                //上面的T是本图片元素到offsetParent顶部的距离，因为这时offsetParent=body，所以此时的T就是所求，但是如果offsetParent不是body，还需要加offsetParent的offsetTop，一直到offsetParent为body
                console.log(T)
            }
            return T;
        }

        function lazyLoad(imgs) {
            var H = document.documentElement.clientHeight;//获取可视区域高度
            console.log("documentElement.scrollTop:"+document.documentElement.scrollTop);
            console.log("body.scrollTop:"+document.body.scrollTop);
            var S = document.documentElement.scrollTop || document.body.scrollTop;
            for (var i = 0; i < imgs.length; i++) {
                if (H + S > getTop(imgs[i])) {
                    //当视角移入当前图片的时候再加载
                    imgs[i].src = imgs[i].getAttribute('data-src');
;                }
            }
        }

        window.onload = window.onscroll = function () { //onscroll()在滚动条滚动的时候触发
            lazyLoad(imgs);
        }
</script>
</html>

结果显示如下：

当只有123图片在视野的时候加载123