jQuery lazyload插件詳解和問題解答

lazyload插件用於圖片延遲加載，節省服務器帶寬，減小服務器請求次數，提升網站的頁面加載速度，用於網站性能優化，只有當圖片在窗口可視範圍內時才向服務器請求；

參數：

threshold：設置距離窗口底部多少像素開始加載圖片，提早加載圖片，

failure_limit：lazyload按照瀑布流加載圖片，當找到（按照圖片在DOM中的位置從上往下）第一張不在可視範圍的圖片後就中止檢測延遲加載圖片的位置

如上圖，若是每一個列表塊包含兩張圖片，failure_limit爲0時，當頁面滾動到陰影位置時，只會加載第一張圖片，由於大圖下的頭像沒有加載，因此會中止加載第二行第二列的圖片。因此failure_limit應該設置爲一行總顯示圖片的個數-1,

event：處理圖片延遲加載的事件，默認的是window滾動事件，

effect：圖片加載效果，

container：處理圖片延遲加載的容器，用於觸發綁定事件用，

data_attribute：圖片延遲加載的圖片地址屬性後綴，data爲前綴，默認爲data-original

skip_invisible：用於顯示隱藏的圖片

appear：用於在圖片加載以前到顯示圖片之間的處理函數，通常用於展現加載動畫，

load：用於圖片加載完畢以後執行的函數，

placeholder：用於顯示圖片以前的圖片佔位符，須要知道圖片有寬度和高度

 

標註：瀏覽器窗口滾動事件的觸發須要窗口的高度(window.innerHeight或$(window).height())和文檔高度(document.body.clientHeight或$(document).height())相等才能觸發滾動事件，可是若是設置html,body{height:100%;}，文檔高度和窗口高度一致就沒法觸發窗口滾動事件。