在Web項目中，大量的圖片應(yīng)用會導(dǎo)致頁面加載時間過長，浪費不必要的帶寬成本，還會影響用戶瀏覽體驗。

Lazyload 是一個文件大小僅4kb的圖片懶加載組件（不依賴其它第三方庫），組件會根據(jù)用戶當(dāng)前瀏覽的區(qū)域去自動加載對應(yīng)的圖片（用戶還沒有瀏覽的區(qū)域圖片則不會進行加載）。

Lazyload 允許圖片加載之前，指定一張相對較小的封面圖。組件會優(yōu)先加載封面圖片，以優(yōu)化用戶瀏覽感受。當(dāng)原圖加載完成之后則會覆蓋封面圖片。

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

效果示例

如何使用？

2.1 Html

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

<img class="img" data-src="http://xxx/img1.jpg" data-cover="http://xxx/img1-cover.jpg">
<img class="img" data-src="http://xxx/img2.jpg" data-cover="http://xxx/img2-cover.jpg">
<img class="img" data-src="http://xxx/img3.jpg" data-cover="http://xxx/img3-cover.jpg">
 
<div class="imgBg" data-src="http://xxx/img4.jpg" data-cover="http://xxx/img4-cover.jpg"></div>
<div class="imgBg" data-src="http://xxx/img5.jpg" data-cover="http://xxx/img5-cover.jpg"></div>
<div class="imgBg" data-src="http://xxx/img6.jpg" data-cover="http://xxx/img6-cover.jpg"></div>

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

<script src="http://xxx/dist/Lazyload.js"></script>

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();

Demo

• Lazyload Demo - default
• Lazyload Demo - custom tips