主要做了兩種圖片加載的效果
一種是遇到頁面圖片比較多的時候，帶讀條效果的加載提示（為了驗證正確加載，設置了1秒鐘的加載間隔時間）
另外一種是根據滑塊的位置進行圖片的預加載，在用戶不察覺的情況下，實現瀑布流的加載效果
一 延遲加載
主要思路：
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里面需要注意的地方有兩個：
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(); }}二 瀑布流加載
主要思路：
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都寫上了，以后可以直接用。將數值關系搞定之后，只要滿足條件就觸發加載即可。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
