1.使用場景

當網頁上有大量圖片需要加載時，如果一次性將圖片全部加載完，網頁加載時間會過長；

網頁本身已經反應很慢了，如果你的頁面上又需要引用圖片，這時候同樣是雪上加霜。

2.圖片懶加載原理

圖片懶加載，只不過是叫法比較高大上而已，其實現方式很簡單，就是在需要的時候再給圖片的src屬性賦值，僅此而已。

3.代碼實現

/** * 圖片懶加載 */function ImgLazyLoad() { /** * 滾動到圖片所在位置再加載 * @param imgId * 懶加載圖片的ID * @param imgSrc * 懶加載圖片的地址 * @param distance * 圖片的可視距離（這個參數可以不傳） */ this.scrollLoad = function(imgId,imgSrc,distance) {// 獲取該圖片的src var img_source = $(’#’ + imgId).attr(’src’); // 只執行一次 if('' == img_source) { // 不滾動的情況下，網頁的可見高度 var documentClientHeight = document.documentElement.clientHeight || window.innerHeight; // 獲取該圖片距離網頁頂部的距離 var imgOffsetTop = $(’#’ + imgId)[0].offsetTop; // 獲取網頁的可見高度 // var bodyClientHeight = document.body.clientHeight; // 1.網頁高度<小于網頁可視區域的高度(imgOffsetTop < documentClientHeight)，就不會發生滾動事件 if (imgOffsetTop < documentClientHeight) {$(’#’ + imgId)[0].src = imgSrc;return; } // 獲取屏幕高度 //var screenHeight = window.screen.height; // 圖片距離網頁左上角的縱向偏移距離（距離網頁頂部的距離） var max_imgClientTop = $(’#’ + imgId)[0].getBoundingClientRect().top; // ie下帶有小數，所以只取整數 max_imgClientTop = parseInt(max_imgClientTop); // 圖片可視距離（還差多少可以被看見） var max_imgClientDistance = max_imgClientTop - documentClientHeight; //0<= distance <=max_imgClientDistance // 1.參數不存在時，設值=0;(圖片剛從可視區域最底部出現時，距離達到最小)distance→→Min=0 // 2.參數>網頁可見高度時，設值=可視區域高度;(不滾動時，距離達到最大)distance→→Max=max_imgClientDistance,scrollTop=0 distance = ((distance || 0)>max_imgClientDistance)?max_imgClientDistance:distance; // 2.最大距離時，無滾動 if (distance == max_imgClientDistance) {$(’#’ + imgId)[0].src = imgSrc;return; } // 頁面綁定滾動事件$(document).scroll(function(){// 獲取網頁被卷高度// var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;// 距離網頁最頂部的距離var imgClientTop = $(’#’ + imgId)[0].getBoundingClientRect().top;// 圖片的可視高度var clientHeight = documentClientHeight - imgClientTop;// 到達指定距離差或者圖片已經進入視野范圍if (-clientHeight <= distance || documentClientHeight >= imgClientTop) { $(’#’ + imgId)[0].src = imgSrc;} }); } }; /** * 通過單擊別的元素時再加載 * @param clickId * 被綁定單擊事件的頁面元素ID * @param imgId * * @param imgSrc * 懶加載圖片的地址 */ // this.clickLoad = function(clickId,imgId,imgSrc) { // 獲取該圖片的src var img_source = $(’#’ + imgId).attr(’src’); // 只執行一次 if('' == img_source) { // 綁定單擊事件 $(’#’ + clickId).click(function(){$(’#’ + imgId)[0].src = imgSrc; }); } };};

調用：

$(function() { // 實例化對象 var ill = new ImgLazyLoad(); // 調用 ill.scrollLoad(’aa’,’http://files.cnblogs.com/files/Marydon20170307/ws_products.bmp’,404);});

4.涉及知識點

網上也有很多實現方法，但是不能自定義設置加載圖片的時機，為了實現這一點，花了不少功夫才搞好。

代碼很短，但是涉及的知識點很多。

// 獲取的是網頁的可視區域的高度（不滾動的情況下）document.documentElement.clientHeight || window.innerHeight// 獲取的是網頁的可見高度（除去隱藏元素的高度）document.body.clientHeight// 獲取的是顯示屏的高度window.screen.height// 獲取網頁的被卷高度（ie下不支持前者獲取方式）document.body.scrollTop || document.documentElement.scrollTop// 獲取指定元素距離網頁頂部的距離（靜態死值）document.getElementById(’#id’).offsetTopdocument.getElementById(’#id’).getBoundingClientRect().top

以上就是js 圖片懶加載的實現的詳細內容，更多關于js 圖片懶加載的資料請關注好吧啦網其它相關文章！