很多網站都會用到‘圖片懶載入’這種方式對網站進行優化，即延遲載入圖片或符合某些條件才開始載入圖片。於是心血來潮，決定自己手動寫一下’圖片懶載入‘外掛。
- 使用這個技術有什麼顯著的優點？
比如一個頁面中有很多圖片，如淘寶首頁等等，一個頁面有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頂部-滾動條滾動的距離）
實現原理：
1.首先從所有相關元素中找出需要延時載入的元素，放在element_obj陣列中。
|
1 2 3 4 5 6 7 8 9 10 |
function initElementMap() { var el = document.getElementsByTagName('img'); for (var j = 0, len2 = el.length; j < len2; j++) { //判斷當前的img是否載入過了，或者有lazy_src標誌 [未完成] if (typeof (el[j].getAttribute("lazy_src"))) { element_obj.push(el[j]); download_count++; } } } |
2.判斷陣列中的img物件，若滿足條件，則改變src屬性
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function lazy() { if (!download_count) return; var innerHeight = getViewport(); for (var i = 0, len = element_obj.length; i < len; i++) { //得到圖片相對document的距上距離 var t_index = getElementViewTop(element_obj[i]); if (t_index - getScrollTop() < innerHeight) { element_obj[i].src = element_obj[i].getAttribute("lazy-src"); delete element_obj[i]; download_count--; } } } |
3.滾動的時候觸發事件，1000毫秒後執行lazy（）方法。
|
1 2 3 4 5 |
window.onscroll = window.onload = function () { setTimeout(function () { lazy(); }, 1000) } |
整部分程式碼位於閉包自執行函式中。相應的方法放在init中。
|
1 2 3 4 5 6 7 8 9 |
var lazyLoad = (function () { function init() { initElementMap(); lazy(); }; return { init: init } })(); |
使用格式 ：src填預設loading圖片地址，真實的圖片地址填在lazy-src屬性裡，切記需指定寬高。在外部呼叫 lazyLoad.init();
全部的程式碼以及例子已經上傳到github上了，地址是：https://github.com/beidan/lazeLoadImg，歡迎star。
打賞支援我寫出更多好文章，謝謝！
打賞作者
打賞支援我寫出更多好文章，謝謝！
任選一種支付方式
