js图片加载结果（耽误加载+瀑布流加载）

2024年1月16日 210次阅读来源: 盛夏光年

重要做了两种图片加载的结果
一种是碰到页面图片比较多的时刻，带读条结果的加载提醒（为了考证准确加载，设置了1秒钟的加载间隔时间）
别的一种是依据滑块的位置举行图片的预加载，在用户不发觉的状况下，完成瀑布流的加载结果

一耽误加载

重要思绪：

HTML的img标签中，将准确的地点存在data-src属性中，给一切图片设置一个转圈圈的loading图片作为background
js中，顺次读取每个img，将data-src中的地点替换到src中，去掉background
每胜利加载一张图片，进度条的百分比举行响应的变化。
假如加载不胜利，就提醒图片加载毛病。

HTML构造很简朴，就是一个div.picList包裹了一切img，然后加上一个简朴的进度条div#loadBar

<body>
    <div class="picList">
        <img class="lazy" data-src="pic/compressed/picList1.jg">
        <img class="lazy" data-src="pic/compressed/picList2.jpg">
        <img class="lazy" data-src="pic/compressed/picList3.jpg">
        <img class="lazy" data-src="pic/compressed/picList4.jpg">
        <img class="lazy" data-src="pic/compressed/picList5.jpg">
        <img class="lazy" data-src="pic/compressed/picList6.jpg">
        <img class="lazy" data-src="pic/compressed/picList7.jpg">
        <img class="lazy" data-src="pic/compressed/picList8.jpg">
        <img class="lazy" data-src="pic/compressed/picList9.jpg">
        <img class="lazy" data-src="pic/compressed/picList10.jpg">
    </div>

    <div id="loadBar">
        <div id="loadBarMask"></div>
    </div>
</body>

css（运用的scss，编译时会自动加上种种兼容前缀）

.picList{
    img{
        width: 100px;
        height: 100px;
        position: relative;

        /*加载失利时显现灰底笔墨*/
        &:after{
            content: "( ⊙ o ⊙ )加载失利";
            font-size: 6px;
            font-family: FontAwesome;
            color: rgb(100, 100, 100);
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: #ddd;
        }
    }
}

.lazy{
    background: url(../pic/loading.gif) center no-repeat;
    border: 1px solid black;
}

#loadBar{
    width: 200px;
    height: 15px;
    background: linear-gradient(90deg,#187103,#81b50b,#187103);
    border: 10px solid white;

    position: absolute;
    top: 150px;
    left: 50%;
    margin-left: -100px;

    #loadBarMask{
        width: 70%;//这个数值显现没有加载胜利的图片
        height: 100%;
        background-color: beige;
        position: absolute;
        right: 0;
    }
}

css内里须要注重的处所有两个：

一个是把图片加载毛病时显现的灰底笔墨放在了img的after伪类中，当图片加载失利，又去掉了background的gif图片今后，就会显现这个部份的内容及款式。
一个是进度条的款式。写得很简朴，重如果一层带渐变的绿色和一层白色叠在一同。绿色示意已加载，白色示意未加载。显现的时刻，直接掌握白色那层的宽度即可。

js部份（直接实行loadPicPerSecond()即可）

var lazyPic = $('img.lazy');
var loadBarMask = $('#loadBarMask');
var picList = $('.picList');

var activePic = 0;
var totalPic = lazyPic.length;

/*每秒加载一张图片*/

function loadPicPerSecond(){

    lazyPic.each(function(index){

        var self = $(this);

        //console.log(self[0].complete);
        /*img标签已事前写在html中，所以此时的complete状况全部都是true*/

        setTimeout(function(){

            src[index] = self.attr('data-src');
            self.attr('src',src[index]);
            self.removeClass('lazy');

            //图片取得准确src地点今后，能够实行下面的onload操纵
            self[0].onload = function(){

                //加载读条loadBar动画
                countPic();
            }

            //图片取得的src地点不准确时，实行下面的onerror操纵
            self[0].onerror = function(){
                /*this.style.background = 'url(pic/compressed/picList18.jpg) center no-repeat';*/
                countPic();
            }

        },1000*index);

    })

}

/*依据onload的实行状况来盘算当前的图片加载进度.每onload一次，activePic就增添1*/

function countPic(){

    activePic++;

    var leftPic = totalPic - activePic;
    var percentPic = Math.ceil(leftPic/totalPic*100);//没有加载的图片百分比，和loadBarMask的宽度占比合营

    console.log("已加载"+(100-percentPic)+"%");

    loadBarMask.css("width",percentPic+"%");

    if(percentPic==0){
        $('#loadBar').hide();
    }
}

二瀑布流加载

重要思绪：

监听窗口转动状况，当已加载的图片的末了一张将近进入窗口的时刻，最先加载下面的图片。
假定一切的图片地点已存在一个json数据中，每次读取10张图片地点，加载它们今后，插进去到现有的瀑布流末端。
云云来去，直到加载完一切图片。

HTML和前面部份雷同，只是把src写成一般地点即可。
css完整一样。

js部份

var lazyPic = $('img.lazy');
var loadBarMask = $('#loadBarMask');
var picList = $('.picList');

var scrollTop,
    clientHeight,
    scrollHeight;

var threshold = 200; //末了一张图片间隔窗口200px的时刻最先加载图片

var src = [];

var activePic = 0;
var totalPic = lazyPic.length;

//待加载的图片数据
var dirtSrc = "pic/compressed/picList";
var picData = {imgSrc:[
    dirtSrc + "20.jpg",
    dirtSrc + "21.jpg",
    dirtSrc + "22.jpg",
    dirtSrc + "23.jpg",
    dirtSrc + "24.jpg",
    dirtSrc + "25.jpg",
    dirtSrc + "26.jpg",
    dirtSrc + "27.jpg",
    dirtSrc + "28.jpg",
    dirtSrc + "29.jpg",
    dirtSrc + "30.jpg",
    dirtSrc + "31.jpg",
    dirtSrc + "32.jpg",
    dirtSrc + "33.jpg",
    dirtSrc + "34.jpg",
    dirtSrc + "35.jpg",
    dirtSrc + "36.jpg",
    dirtSrc + "37.jpg",
    dirtSrc + "38.jpg",
    dirtSrc + "39.jpg",
    dirtSrc + "40.jpg",
    dirtSrc + "41.jpg",
    dirtSrc + "42.jpg",
    dirtSrc + "43.jpg",
    dirtSrc + "44.jpg",
    dirtSrc + "45.jpg",
    dirtSrc + "46.jpg",
    dirtSrc + "47.jpg",
    dirtSrc + "48.jpg",
    dirtSrc + "49.jpg",
]};

//加载次数计数器
var scrollIndex = 0;

$(function(){

    /*监听窗口转动状况*/
    $(window).on('scroll',function(){

        scrollTop = $(window).scrollTop();//$(window).scrollTop()==document.body.scrollTop
        clientHeight = $(window).height();
        scrollHeight = picList.last().height();//picList.last()[0].clientHeight

        /*目的与窗口的间隔到达阈值时最先加载*/
        if(scrollHeight-clientHeight-scrollTop < threshold){
            scrollPic(10);
        }
    })
})

/*依据转动水平加载图片，每次加载perAmount张*/

function scrollPic(perAmount = 10){

    var totalAmount = perAmount * (scrollIndex+1);

     //斟酌到末了一次加载的时刻，盈余的图片数目有能够达不到限制的每次加载的数目，这时刻须要变动totalAmount的值
    if(totalAmount>picData.imgSrc.length){
        totalAmount = picData.imgSrc.length;
    }
    for(scrollIndex;scrollIndex<totalAmount;scrollIndex++){
        var oimg = new Image();
        oimg.src = picData.imgSrc[scrollIndex];
        picList.append(oimg);
    }

}

比较捉急的就是scrollTop、height那几个值的取值对象，老是记不清楚，所以根据js和jquery都写上了，今后能够直接用。将数值关联搞定今后，只需满足前提就触发加载即可。

三跋文·兼容性问题

拿到IE8之下运行时，发明img.onload背面的function打死都不实行，IE8智障到不能完成 img.onload = function(){}这么低级的代码么？
去查了材料今后，发明IE8虽然傻子，但还算没有智障到无药可救。
onload是能够挪用的，然则要放在src的赋值之前。

简朴来讲，就是要先通知浏览器图片加载完要怎样处置惩罚，再让它去加载图片。防止由于加载缓冲区的速率太快，在没有通知它加载完要怎样办时，它已加载完了。而别的浏览器则是从缓冲区读取到图片时就实行onload。

    原文作者：盛夏光年
    原文地址: https://segmentfault.com/a/1190000009382306
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。

一 耽误加载

二 瀑布流加载

三 跋文·兼容性问题

一耽误加载

二瀑布流加载

三跋文·兼容性问题