圖片懶加載插件實戰

———————————————————————————————最新更新—————————————————————————————————-

 

在面試的時候有面試官問我，懶加載這個插件你有沒有想到如何去 優化？又間接問我 函數節流的問題，嘿嘿，今天就更新下這個插件，順便應用下函數節流（throttle），先直接上下代碼，含解析

 1 /*
 2      * 函數功能：函數節流
 3      * fn  須要調用的函數
 4      * delay  函數須要延遲處理的時間
 5      * mustRunDelay  超過該時間，函數必定會執行
 6      * */
 7     var throttle = function (fn, delay, mustRunDelay) {
 8         var timer;  //使用閉包存儲timer
 9         var t_start;
10         //閉包返回的函數
11         return function (val) {
12             var args = arguments, t_curr = +new Date();  //使用+new Date() 將字符串轉換成數字
13             clearTimeout(timer);
14             if (!t_start) {  // 使用!t_start 若是t_start=undefined或者null 則爲true
15                 t_start = t_curr;
16             }
17             if (t_curr - t_start >= mustRunDelay) {
18                 fn.apply(null, args);
19                 t_start = t_curr;
20             } else {
21                 timer = setTimeout(function () {
22                     fn.apply(null, args);
23                 }, delay);
24             }
25         }
26     };
27 
28  /*使用方法*/
29     var throttle1 = throttle(fn, 500, 4000);
30     //在該須要調用的函數內部調用此函數
31     throttle1(val); //此處傳人的參數爲以上fn須要傳人的參數

至於函數節流具體的好處，經常使用的場景，如下文章說得很是清楚，我就再也不說啦～

 

好文推薦：

http://www.alloyteam.com/2012/11/javascript-throttle/#prettyPhoto

http://www.cnblogs.com/LuckyWinty/p/5949970.html

 

—————————————————————————————華麗的分割線————————————————————————————

 

 

不少網站都會用到‘圖片懶加載’這種方式對網站進行優化，即延遲加載圖片或符合某些條件纔開始加載圖片。因而心血來潮，決定本身手動寫一下’圖片懶加載‘插件。

 

• 使用這個技術有什麼顯著的優勢？

好比一個頁面中有不少圖片，如淘寶首頁等等，一個頁面有100多的圖片，若是一上來就發送這麼多請求，頁面加載就會很漫長，若是js文件都放在了文檔的底部，恰巧頁面的頭部又依賴這個js文件，那就很差辦了。用戶感受這個頁面就會很卡。

 

• 懶加載原理：瀏覽器會自動對頁面中的img標籤的src屬性發送請求並下載圖片。經過動態改變img的src屬性實現。

當訪問一個頁面的時候，先把img元素或是其餘元素的背景圖片路徑替換成loading圖片地址（這樣就只需請求一次）

等到必定條件（這裏是頁面滾動到必定區域），用實際存放img地址的laze-load屬性的值去替換src屬性，便可實現'懶加載'。

//即便img的src值爲空，瀏覽器也會對服務器發送請求。因此平時作項目的時候，若是img沒有用到src，就不要出現src這個屬性 

 

• 先上三個重要的知識點

1.獲取屏幕可視窗口大小：

document.documentElement.clientHeight 標準瀏覽器及低版本IE標準模式

document.body.clientHeight 低版本混雜模式

2. 元素相對於文檔document頂部

element.offsetTop

3.滾動條滾動的距離

document.documentElement.scrollTop   兼容ie低版本的標準模式 

document.body.scrollTop 兼容混雜模式；

 

滾動加載：當圖片出如今可視區域時，動態加載該圖片。

原理：當圖片元素頂部是否在可視區域內， （圖片相對於文檔document頂部-滾動條滾動的距離）< 可視窗口大小，改變該img的src屬性

 

實現原理：

1.首先從全部相關元素中找出須要延時加載的元素，放在element_obj數組中。

 1  function initElementMap() {
 2       var el = document.getElementsByTagName('img');
 3       for (var j = 0, len2 = el.length; j < len2; j++) {
 4   //判斷當前的img是否加載過了，或者有lazy_src標誌  [未完成]
 5           if (typeof (el[j].getAttribute("lazy_src"))) {
 6               element_obj.push(el[j]);
 7               download_count++;
 8           }
 9       }
10  }      

2.判斷數組中的img對象，若知足條件，則改變src屬性

 1 function lazy() {
 2     if (!download_count) return;
 3     var innerHeight = getViewport();
 4     for (var i = 0, len = element_obj.length; i < len; i++) {
 5 //獲得圖片相對document的距上距離
 6         var t_index = getElementViewTop(element_obj[i]);     
 7         if (t_index - getScrollTop() < innerHeight) {
 8             element_obj[i].src = element_obj[i].getAttribute("lazy-src");
 9             delete element_obj[i];
10             download_count--;
11         }
12     }
13 }                    

3.滾動的時候觸發事件，1000毫秒後執行lazy（）方法。

1 window.onscroll = window.onload = function () {
2     setTimeout(function () {
3         lazy();
4     }, 1000)
5 }    

整部分代碼位於閉包自執行函數中。相應的方法放在init中。

1 var lazyLoad = (function () {  
2     function init() {
3         initElementMap();
4         lazy();
5     };
6     return {
7         init: init    
8     }
9 })();    

 

　　

 使用格式 ：src填默認loading圖片地址，真實的圖片地址填在lazy-src屬性裏，切記需指定寬高。在外部調用  lazyLoad.init();

 所有的代碼以及例子已經上傳到github上了，地址是： https://github.com/beidan/lazeLoadImg，歡迎star