另外一種是根據(jù)滑塊的位置進(jìn)行圖片的預(yù)加載，在用戶不察覺的情況下，實現(xiàn)瀑布流的加載效果
一 延遲加載
主要思路：
HTML的img標(biāo)簽中，將正確的地址存在data-src屬性中，給所有圖片設(shè)置一個轉(zhuǎn)圈圈的loading圖片作為background
js中，依次讀取每一個img，將data-src中的地址替換到src中，去掉background
每成功加載一張圖片，進(jìn)度條的百分比進(jìn)行相應(yīng)的變化。
如果加載不成功，就提示圖片加載錯誤。
HTML結(jié)構(gòu)很簡單，就是一個div.picList包裹了所有img，然后加上一個簡單的進(jìn)度條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%;//這個數(shù)值顯示沒有加載成功的圖片 height: 100%; background-color: beige; position: absolute; right: 0; } }
css里面需要注意的地方有兩個：
一個是把圖片加載錯誤時顯示的灰底文字放在了img的after偽類中，當(dāng)圖片加載失敗，又去掉了background的gif圖片之后，就會顯示這個部分的內(nèi)容及樣式。
一個是進(jìn)度條的樣式。寫得很簡單，主要是一層帶漸變的綠色和一層白色疊在一起。綠色表示已加載，白色表示未加載。顯示的時候，直接控制白色那層的寬度即可。
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中，所以此時的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動畫 countPic(); } //圖片獲得的src地址不正確時，執(zhí)行下面的onerror操作 self[0].onerror = function(){ /*this.style.background = 'url(pic/compressed/picList18.jpg) center no-repeat';*/ countPic(); } },1000*index); }) } /*根據(jù)onload的執(zhí)行情況來計算當(dāng)前的圖片加載進(jìn)度.每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(); } }
二 瀑布流加載
主要思路：
監(jiān)聽窗口滾動情況，當(dāng)已經(jīng)加載的圖片的最后一張快要進(jìn)入窗口的時候，開始加載下面的圖片。
假設(shè)所有的圖片地址已經(jīng)存在一個json數(shù)據(jù)中，每次讀取10張圖片地址，加載它們之后，插入到現(xiàn)有的瀑布流末尾。
如此往復(fù)，直到加載完所有圖片。
HTML和前面部分相同，只是把src寫成正常地址即可。css完全一樣。
js部分