摘要：如果加載不成功，就提示圖片加載錯(cuò)誤。綠色表示已加載，白色表示未加載。假設(shè)所有的圖片地址已經(jīng)存在一個(gè)數(shù)據(jù)中，每次讀取張圖片地址，加載它們之后，插入到現(xiàn)有的瀑布流末尾。避免因?yàn)榧虞d緩沖區(qū)的速度太快，在沒(méi)有告訴它加載完要怎么辦時(shí)，它已經(jīng)加載完了。

主要做了兩種圖片加載的效果
一種是遇到頁(yè)面圖片比較多的時(shí)候，帶讀條效果的加載提示（為了驗(yàn)證正確加載，設(shè)置了1秒鐘的加載間隔時(shí)間）
另外一種是根據(jù)滑塊的位置進(jìn)行圖片的預(yù)加載，在用戶不察覺(jué)的情況下，實(shí)現(xiàn)瀑布流的加載效果

主要思路：

HTML的img標(biāo)簽中，將正確的地址存在data-src屬性中，給所有圖片設(shè)置一個(gè)轉(zhuǎn)圈圈的loading圖片作為background

js中，依次讀取每一個(gè)img，將data-src中的地址替換到src中，去掉background

每成功加載一張圖片，進(jìn)度條的百分比進(jìn)行相應(yīng)的變化。

如果加載不成功，就提示圖片加載錯(cuò)誤。

HTML結(jié)構(gòu)很簡(jiǎn)單，就是一個(gè)div.picList包裹了所有img，然后加上一個(gè)簡(jiǎn)單的進(jìn)度條div#loadBar

css（使用的scss，編譯時(shí)會(huì)自動(dòng)加上各種兼容前綴）

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

        /*加載失敗時(shí)顯示灰底文字*/
        &: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: #ffffd;
        }
    }
}

.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%;//這個(gè)數(shù)值顯示沒(méi)有加載成功的圖片
        height: 100%;
        background-color: beige;
        position: absolute;
        right: 0;
    }
}

css里面需要注意的地方有兩個(gè)：

一個(gè)是把圖片加載錯(cuò)誤時(shí)顯示的灰底文字放在了img的after偽類中，當(dāng)圖片加載失敗，又去掉了background的gif圖片之后，就會(huì)顯示這個(gè)部分的內(nèi)容及樣式。

一個(gè)是進(jìn)度條的樣式。寫得很簡(jiǎn)單，主要是一層帶漸變的綠色和一層白色疊在一起。綠色表示已加載，白色表示未加載。顯示的時(shí)候，直接控制白色那層的寬度即可。

js部分（直接執(zhí)行l(wèi)oadPicPerSecond()即可）

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標(biāo)簽已經(jīng)事先寫在html中，所以此時(shí)的complete狀態(tài)全部都是true*/

        setTimeout(function(){

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

            //圖片獲得正確src地址之后，可以執(zhí)行下面的onload操作
            self[0].onload = function(){

                //加載讀條loadBar動(dòng)畫
                countPic();
            }

            //圖片獲得的src地址不正確時(shí)，執(zhí)行下面的onerror操作
            self[0].onerror = function(){
                /*this.style.background = "url(pic/compressed/picList18.jpg) center no-repeat";*/
                countPic();
            }

        },1000*index);

    })

}

/*根據(jù)onload的執(zhí)行情況來(lái)計(jì)算當(dāng)前的圖片加載進(jìn)度.每onload一次，activePic就增加1*/

function countPic(){

    activePic++;

    var leftPic = totalPic - activePic;
    var percentPic = Math.ceil(leftPic/totalPic*100);//沒(méi)有加載的圖片百分比，和loadBarMask的寬度占比配合

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

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

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

主要思路：

監(jiān)聽(tīng)窗口滾動(dòng)情況，當(dāng)已經(jīng)加載的圖片的最后一張快要進(jìn)入窗口的時(shí)候，開(kāi)始加載下面的圖片。

假設(shè)所有的圖片地址已經(jīng)存在一個(gè)json數(shù)據(jù)中，每次讀取10張圖片地址，加載它們之后，插入到現(xiàn)有的瀑布流末尾。

如此往復(fù)，直到加載完所有圖片。

HTML和前面部分相同，只是把src寫成正常地址即可。
css完全一樣。

js部分

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

var scrollTop,
    clientHeight,
    scrollHeight;

var threshold = 200; //最后一張圖片距離窗口200px的時(shí)候開(kāi)始加載圖片

var src = [];

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

//待加載的圖片數(shù)據(jù)
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",
]};

//加載次數(shù)計(jì)數(shù)器
var scrollIndex = 0;

$(function(){

    /*監(jiān)聽(tīng)窗口滾動(dòng)情況*/
    $(window).on("scroll",function(){

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

        /*目標(biāo)與窗口的距離達(dá)到閾值時(shí)開(kāi)始加載*/
        if(scrollHeight-clientHeight-scrollTop < threshold){
            scrollPic(10);
        }
    })
})

/*根據(jù)滾動(dòng)程度加載圖片，每次加載perAmount張*/

function scrollPic(perAmount = 10){

    var totalAmount = perAmount * (scrollIndex+1);

     //考慮到最后一次加載的時(shí)候，剩余的圖片數(shù)量有可能達(dá)不到限定的每次加載的數(shù)量，這時(shí)候需要更改totalAmount的值
    if(totalAmount>picData.imgSrc.length){
        totalAmount = picData.imgSrc.length;
    }
    for(scrollIndex;scrollIndex
比較捉急的就是scrollTop、height那幾個(gè)值的取值對(duì)象，總是記不清楚，所以按照js和jquery都寫上了，以后可以直接用。將數(shù)值關(guān)系搞定之后，只要滿足條件就觸發(fā)加載即可。
三 后記·兼容性問(wèn)題
拿到IE8之下運(yùn)行時(shí)，發(fā)現(xiàn)img.onload后面的function打死都不執(zhí)行，IE8智障到不能完成 img.onload = function(){}這么初級(jí)的代碼么？
去查了資料之后，發(fā)現(xiàn)IE8雖然白癡，但還算沒(méi)有智障到無(wú)藥可救。
onload是可以調(diào)用的，但是要放在src的賦值之前。
簡(jiǎn)單來(lái)說(shuō)，就是要先告訴瀏覽器圖片加載完要怎么處理，再讓它去加載圖片。避免因?yàn)榧虞d緩沖區(qū)的速度太快，在沒(méi)有告訴它加載完要怎么辦時(shí)，它已經(jīng)加載完了。而其它瀏覽器則是從緩沖區(qū)讀取到圖片時(shí)就執(zhí)行onload。