Web图片懒加载组件—Lazyload_综合

在Web项目中，大量的图片应用会导致页面加载时间过长，浪费不必要的带宽成本，还会影响用户浏览体验。

Lazyload 是一个文件大小仅4kb的图片懒加载组件（不依赖其它第三方库），组件会根据用户当前浏览的区域去自动加载对应的图片（用户还没有浏览的区域图片则不会进行加载）。

Lazyload 允许图片加载之前，指定一张相对较小的封面图。组件会优先加载封面图片，以优化用户浏览感受。当原图加载完成之后则会覆盖封面图片。

除此之外，Lazyload 还能获取到当前图片的加载进度。

如何使用？

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>

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,          //elementsrange: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