———————————————————————————————最新更新—————————————————————————————————-
在面試的時候有面試官問我，懶加載這個插件你有沒有想到如何去
優化？又間接問我
函數節流的問題，嘿嘿，今天就更新下這個插件，順便應用下函數節流（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需要傳人的參數
至於函數節流具體的好處，常用的場景，以下文章說得非常清楚，我就不再說啦～
好文推薦：
—————————————————————————————華麗的分割線————————————————————————————
很多網站都會用到‘圖片懶加載’這種方式對網站進行優化，即延遲加載圖片或符合某些條件才開始加載圖片。於是心血來潮，決定自己手動寫一下’圖片懶加載‘插件。
- 使用這個技術有什么顯著的優點？
比如一個頁面中有很多圖片，如淘寶首頁等等，一個頁面有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
