图片懒加载

最新推荐文章于 2024-05-28 17:25:10 发布

竹节虫T

最新推荐文章于 2024-05-28 17:25:10 发布

阅读量82

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43623871/article/details/90732237

版权

前端专栏收录该内容

61 篇文章 0 订阅

订阅专栏

懒加载即延迟，对于图片过多的页面，为了加快页面加载速度，我们需要将页面内未出现在可视区域内的图片先不做加载，等到滚动到可视区域后再去加载。
这样一来页面加载性能大幅提升，提高了用户体验。

实现原理：

在页面载入时将img标签內的src指向一个小图片，即占位图或loading图，将真实地址存放于一个自定义属性data-src中。当页面滚动时，遍历有data-src的img标签，判断每个img是否进入可视区，当某个img进入了可视区域，就将真实地址赋值给该img的src并将该img的data-src删除以避免重复判断。

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 500px;
            height: 100%;
            overflow: hidden;
        }
        .container img{
            width: 200px;
            height: 200px;
            margin: 10px 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="" alt="图片正在加载" data-src="img/1.jpg">
        <img src="" alt="图片正在加载" data-src="img/2.jpg">
        <img src="" alt="图片正在加载" data-src="img/3.jpg">
        <img src="" alt="图片正在加载" data-src="img/4.jpg">
        <img src="" alt="图片正在加载" data-src="img/5.jpg">
        <img src="" alt="图片正在加载" data-src="img/6.jpg">
        <img src="" alt="图片正在加载" data-src="img/7.jpg">
        <img src="" alt="图片正在加载" data-src="img/8.jpg">
        <img src="" alt="图片正在加载" data-src="img/9.jpg">
        <img src="" alt="图片正在加载" data-src="img/10.jpg">
        <img src="" alt="图片正在加载" data-src="img/11.jpg">
        <img src="" alt="图片正在加载" data-src="img/12.jpg">
        <img src="" alt="图片正在加载" data-src="img/13.jpg">
        <img src="" alt="图片正在加载" data-src="img/14.jpg">
        <img src="" alt="图片正在加载" data-src="img/15.jpg">
        <img src="" alt="图片正在加载" data-src="img/16.jpg">
        <img src="" alt="图片正在加载" data-src="img/17.jpg">
        <img src="" alt="图片正在加载" data-src="img/18.jpg">
        <img src="" alt="图片正在加载" data-src="img/19.jpg">
        <img src="" alt="图片正在加载" data-src="img/20.jpg">
        <img src="" alt="图片正在加载" data-src="img/21.jpg">
        <img src="" alt="图片正在加载" data-src="img/22.jpg">
        <img src="" alt="图片正在加载" data-src="img/1.jpg">
        <img src="" alt="图片正在加载" data-src="img/2.jpg">
        <img src="" alt="图片正在加载" data-src="img/3.jpg">
        <img src="" alt="图片正在加载" data-src="img/4.jpg">
        <img src="" alt="图片正在加载" data-src="img/5.jpg">
        <img src="" alt="图片正在加载" data-src="img/6.jpg">
        <img src="" alt="图片正在加载" data-src="img/7.jpg">
        <img src="" alt="图片正在加载" data-src="img/8.jpg">
        <img src="" alt="图片正在加载" data-src="img/9.jpg">
        <img src="" alt="图片正在加载" data-src="img/10.jpg">
        <img src="" alt="图片正在加载" data-src="img/11.jpg">
        <img src="" alt="图片正在加载" data-src="img/12.jpg">
        <img src="" alt="图片正在加载" data-src="img/13.jpg">
        <img src="" alt="图片正在加载" data-src="img/14.jpg">
        <img src="" alt="图片正在加载" data-src="img/15.jpg">
        <img src="" alt="图片正在加载" data-src="img/16.jpg">
        <img src="" alt="图片正在加载" data-src="img/17.jpg">
        <img src="" alt="图片正在加载" data-src="img/18.jpg">
        <img src="" alt="图片正在加载" data-src="img/19.jpg">
        <img src="" alt="图片正在加载" data-src="img/20.jpg">
        <img src="" alt="图片正在加载" data-src="img/21.jpg">
        <img src="" alt="图片正在加载" data-src="img/22.jpg">
    </div> 
    <img src="" data-src="img/small.jpg"  data-original="img/big.jpg" style="width: 40%;">
    <script src="js/index.js"></script>
    <script>
        startLazyLoad("img/default.jpg");
    </script>
</body>
</html>


/**ctrl + alt +t
 * @description: 开始图片懒加载
 * @param defaultImg 默认图片
 */
function startLazyLoad(defaultImg) {
    // 0. 先得到所有需要懒加载的图片
    var imgs = document.querySelectorAll("img[data-src]");
    //将其设置为真实的数组
    imgs = Array.from(imgs);//Array.from函数返回一个真实的数组

    // 1. 设置默认图片
    setDefaultImgs();

    // 2. 懒加载所有图片
    loadAllImgs();

    // 3.滚动事件
    var timer  = null;
    document.body.onscroll = function(){
        if(timer){
            clearTimeout(timer);
        }
        timer = setTimeout(function(){
            loadAllImgs();
        },500)
    }



    // 函数区：
    // 设置默认图片
    function setDefaultImgs(){
        if(!defaultImg){
            //没有默认图片
            return;
        }
         // 设置默认图片
         for(var i = 0; i < imgs.length; i++){
             console.log(imgs.length);
            var img =  imgs[i];
            img.src = defaultImg;
         }
    }

    // 懒加载所有图片
    function loadAllImgs(){
        for(var i = 0; i < imgs.length; i++){
            var img = imgs[i];
            if(loadImg(img)){
                //懒加载每一张图片
                // 如果已经加载了话，去除掉已经加载了的图片
                imgs.splice(i,1);
                i--;
            }
        }
    }


    /**
     * @description: 懒加载一张图片，自行判断是否应该加载
     * @param img   图片的dom对象
     */
    function loadImg(img){
        //判断该图片是否能够加载
        // 判断的实质是，该图片，是否在可视区域内
        // 每一个dom对象都有一个函数，getBoundingClientRect
        var rect = img.getBoundingClientRect();
        if(rect.bottom <=0 ){
            return false;
        }
        if(rect.top >= document.documentElement.clientHeight){
            return false;
        }
        // 加载图片
        img.src = img.dataset.src;

        // 判断是否有原图
        if(img.dataset.original){
            // 等待图片加载完成
            img.onload = function(){
                img.src = img.dataset.original;
                img.onload = null;
            }
        }
        return true;
    }

}