帶加載進(jìn)度的Web圖片懶加載組件Lazyload

zhoutk 發(fā)布于2019-08-02 10:17 / 2593人閱讀

摘要：是一個(gè)文件大小僅的圖片懶加載組件不依賴其它第三方庫(kù)，組件會(huì)根據(jù)用戶當(dāng)前瀏覽的區(qū)域去自動(dòng)加載對(duì)應(yīng)的圖片用戶還沒有瀏覽的區(qū)域圖片則不會(huì)進(jìn)行加載。允許圖片加載之前，指定一張相對(duì)較小的封面圖。當(dāng)原圖加載完成之后則會(huì)覆蓋封面圖片。

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

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

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

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

效果演示

Lazyload Demo - default

Lazyload Demo - 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

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