一、什么是圖片懶加載足删？
當瀏覽器打開一個頁面的時候寿谴，img標簽先顯示占位圖（loading.gif）锁右，頁面滾動失受，當該元素出現(xiàn)在瀏覽器的可視區(qū)域范圍內(nèi)時，img元素開始進行真實圖片路徑加載咏瑟，并顯示出來拂到。這就是圖片懶加載。
二码泞、為什要使用這個技術(shù)兄旬？
比如一個頁面中有很多圖片，如淘寶余寥、京東首頁等等领铐，如果一上來就發(fā)送這么多請求，頁面加載就會很漫長宋舷。網(wǎng)絡性能上：一開啟頁面就發(fā)送百八十個請求绪撵，服務器可能就吃不消了。比如一個頁面有50張圖片祝蝠，就有50個圖片請求音诈，同時有100個人訪問的話，就是5000個請求绎狭。
==總結(jié)：不僅可以減輕服務器的壓力细溅，而且可以讓頁面更快地呈現(xiàn)在用戶面前（用戶體驗好）。==
三儡嘶、怎么實現(xiàn)喇聊？
預熱
1、頁面中的img元素蹦狂，如果沒有src屬性或者src屬性沒有設(shè)置值誓篱，瀏覽器就不會發(fā)出請求去下載圖片 一旦通過JavaScript或者jQuery或DOM操作設(shè)置了圖片路徑邻耕，瀏覽器才會送請求，進行圖片的下載燕鸽。
2兄世、如何獲取圖片真實的請求路徑，先把真的路徑存在元素的“data-original”（這個值可以自定義設(shè)置）屬性里啊研，要用的時候就取出來御滩，再設(shè)置src屬性就可以了，而src一開始則放入占位圖顯示（占位圖用本地工程下的一張圖片即可）党远。
條件
==- 存在真實路徑的key值削解，如上面所述的‘data-original’，并且為img標簽元素==
==- 該img為顯示元素沟娱，沒有隱藏==
==- 該img在瀏覽器的可視范圍區(qū)域內(nèi)==
==- 該img是否在下載操作的緩存數(shù)組里面==
3氛驮、熱身幾個關(guān)鍵點的基礎(chǔ)知識。
屏幕可視窗口大小
| javas | jQuery |
|---|---|
| window.screen.availHeight | $(window).height() |
瀏覽器窗口頂部與文檔頂部之間的距離济似，也就是滾動條滾動的距離
| javas | jQuery |
|---|---|
| document.body.scrollTop | $(document).scrollTop() |
元素相對于文檔document頂部矫废、左邊的距離
jQuery
元素距離文檔頂?shù)木嚯x
$(o).offset().top
元素距離文檔左邊緣的距離
$(o).offset().left
JavaScript
function getPosition (obj) {
var pos = {
top:0,
left:0
};
while (obj.offsetParent) {
pos.top += obj.offsetTop+obj.clientTop;
pos.left += obj.offsetLeft+obj.clientLeft;
obj = obj.offsetParent;
}
return pos;
}
image
4、如何判斷某個元素進入或者即將進入可視窗口區(qū)域砰蠢？
image
關(guān)鍵代碼如下
var a = offsetTop(img);
if (a > document.body.scrollTop && a < (document.body.scrollTop + window.screen.availHeight)) {
// 在可視范圍內(nèi)
}
三蓖扑、ytLazyLoad.js
| ytLazyLoad.js | jquery.lazyload.min.js |
|---|---|
| 純JavaScript操作，不依賴任何的js文件 | jquery操作台舱，依賴于jquery.min.jsw文件 |
| 圖片加載成功或失敗有回調(diào)事件 | 成功或者失敗不存在回調(diào)事件 |
| 只支持垂直滑動 | 支持垂直律杠、水平滑動 |
| 只支持一級窗口嵌套 | 支持多個窗口嵌套 |
碼云公開代碼的地址：
http://git.oschina.net/freedom_coco/codes/xy7ocuz8i4qajfknvpb2g12
使用方法：
YTImageLazyLoad({
success: function(obj, index) {
console.log(obj + '加載成功，下標為' + index);
},
failure: function(obj, index) {
console.log(obj + '加載失敗竞惋，下標為' + index);
},
cusImgclass: 'imgURL quotepic userHead',
cusImgid: 'xx xxx xxx'
});
