帶加載進度的Web圖片懶加載組件Lazyload

在Web項目中，大批的圖片運用會致使頁面加載時候太長，糟蹋不必要的帶寬本錢，還會影響用戶閱讀體驗。

Lazyload 是一個文件大小僅4kb的圖片懶加載組件（不依賴別的第三方庫），組件會依據用戶當前閱讀的地區去自動加載對應的圖片（用戶還沒有閱讀的地區圖片則不會舉行加載）。

Lazyload 許可圖片加載之前，指定一張相對較小的封面圖。組件會優先加載封面圖片，以優化用戶閱讀感覺。當原圖加載完成以後則會掩蓋封面圖片。

除此之外，Lazyload 還能獲取到當前圖片的加載進度。

結果演示

• Lazyload Demo &＃8211; default
• Lazyload Demo &＃8211; custom tips

怎樣運用？

2.1 Html

• html set the data-src property.
• data-cover is not necessary

2.2 Import ./dist/Lazyload.js file to the page

or

let Lazyload = require('./dist/Lazyload.js');

2.3 Initialization

//Get elements
var eList = [];
eList.push.apply(eList, document.getElementsByClassName('img'));
eList.push.apply(eList, document.getElementsByClassName('imgBg'));
//Create Lazy
var lazy = new Lazyload({
obj:eList, //elements
range:200 //Extra range
});
// //custom tips
// lazy.tips = function(obj){
// var e = obj.o, //element
// schedule = obj.schedule; //load schedule
// console.log(e,schedule);
// };
//Init
lazy.init();