成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

UsherChen / 2279人閱讀

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

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

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

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

除此之外，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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113142.html

相關(guān)文章

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

    摘要：是一個文件大小僅的圖片懶加載組件不依賴其它第三方庫，組件會根據(jù)用戶當(dāng)前瀏覽的區(qū)域去自動加載對應(yīng)的圖片用戶還沒有瀏覽的區(qū)域圖片則不會進(jìn)行加載。允許圖片加載之前，指定一張相對較小的封面圖。當(dāng)原圖加載完成之后則會覆蓋封面圖片。 在Web項(xiàng)目中，大量的圖片應(yīng)用會導(dǎo)致頁面加載時間過長，浪費(fèi)不必要的帶寬成本，還會影響用戶瀏覽體驗(yàn)。 Lazyload 是一個文件大小僅4kb的圖片懶加載組件（不依賴其...

    JerryWangSAP 評論0 收藏0

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

    摘要：是一個文件大小僅的圖片懶加載組件不依賴其它第三方庫，組件會根據(jù)用戶當(dāng)前瀏覽的區(qū)域去自動加載對應(yīng)的圖片用戶還沒有瀏覽的區(qū)域圖片則不會進(jìn)行加載。允許圖片加載之前，指定一張相對較小的封面圖。當(dāng)原圖加載完成之后則會覆蓋封面圖片。 在Web項(xiàng)目中，大量的圖片應(yīng)用會導(dǎo)致頁面加載時間過長，浪費(fèi)不必要的帶寬成本，還會影響用戶瀏覽體驗(yàn)。 Lazyload 是一個文件大小僅4kb的圖片懶加載組件（不依賴其...

    zhoutk 評論0 收藏0

  • 看完你也想編寫自己的 react 插件

    摘要：清楚自己想要什么樣的組件，就自己動手?jǐn)]唄。咱們先來看看它的效果吧如果大家有時間，窩還是鼓勵大家自己動手實(shí)現(xiàn)一些小插件。于是自己就琢磨能否繼承使用方法同時保持特有組件特性。需要確保已安裝。 副標(biāo)題----為什么我要寫這個 react 插件 圖片懶加載是項(xiàng)目中常用的功能，然而現(xiàn)有 react 懶加載組件庫，用著都不是很爽了 ?。概括一下有如下幾點(diǎn)： 沒有只針對 image 懶加載組件。多...

    Vixb 評論0 收藏0

  • 看完你也想編寫自己的 react 插件

    摘要：清楚自己想要什么樣的組件，就自己動手?jǐn)]唄。咱們先來看看它的效果吧如果大家有時間，窩還是鼓勵大家自己動手實(shí)現(xiàn)一些小插件。于是自己就琢磨能否繼承使用方法同時保持特有組件特性。需要確保已安裝。 副標(biāo)題----為什么我要寫這個 react 插件 圖片懶加載是項(xiàng)目中常用的功能，然而現(xiàn)有 react 懶加載組件庫，用著都不是很爽了 ?。概括一下有如下幾點(diǎn)： 沒有只針對 image 懶加載組件。多...

    zhou_you 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<