Web圖片懶載入元件—Lazyload
阿新 • • 發佈:2019-02-14
在Web專案中,大量的圖片應用會導致頁面載入時間過長,浪費不必要的頻寬成本,還會影響使用者瀏覽體驗。
Lazyload 是一個檔案大小僅4kb的圖片懶載入元件(不依賴其它第三方庫),元件會根據使用者當前瀏覽的區域去自動載入對應的圖片(使用者還沒有瀏覽的區域圖片則不會進行載入)。
Lazyload 允許圖片載入之前,指定一張相對較小的封面圖。元件會優先載入封面圖片,以優化使用者瀏覽感受。當原圖載入完成之後則會覆蓋封面圖片。
除此之外,Lazyload 還能獲取到當前圖片的載入進度。
如何使用?
2.1 Html
- html set the
data-src
property. data-cover
<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
<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();