lozad.js-高性能的純JavaScript輕量

lozad.js-高性能的純JavaScript輕量級(jí)懶加載器

么是懶加載？

在Web開(kāi)發(fā)中經(jīng)常會(huì)遇到一些性能問(wèn)題，有很多原因就是因?yàn)橐淮涡哉?qǐng)求過(guò)多導(dǎo)致的，而懶加載是一種在不影響原有界面，當(dāng)界面需要展現(xiàn)給用戶才進(jìn)行加載和請(qǐng)求，常見(jiàn)的就是圖片的加載，在很多電商頁(yè)面中最常見(jiàn)，通過(guò)懶加載的方式提升了頁(yè)面的性能，用戶體驗(yàn)也會(huì)更好了。

為什么使用lozad.js

現(xiàn)有的延遲加載庫(kù)依賴窗體的滾動(dòng)事件，或者使用定期計(jì)時(shí)器并調(diào)用在需要延遲加載的元素上getBoundingClientRect()。然而，這種方法非常緩慢，因?yàn)槊看握{(diào)用getBoundingClientRect()強(qiáng)制瀏覽器重新布局整個(gè)頁(yè)面而lozad.js不依賴這些，因此性能很好。

lozad.js介紹

Github地址

https://github.com/ApoorvSaxena/lozad.js

lozad.js是使用純JavaScript實(shí)現(xiàn)的不借助圖像或iframe的高性能且輕量級(jí)可配置延遲加載器，它的思想是觀察者模式

特點(diǎn)

純js實(shí)現(xiàn)
非常輕量，壓縮后只有1.04kb
零依賴
允許延遲加載動(dòng)態(tài)添加的元素
支持圖片、iframe、視頻、音頻、背景圖片等
免費(fèi)開(kāi)源

最新版本在于有基礎(chǔ)上性能得到了極大地提升。

安裝使用

安裝

npm install --save lozad
//OR
yarn add lozad
//OR
bower install lozad

使用

// using ES6 模塊
import lozad from 'lozad'
// using CommonJS 模塊
var lozad=require('lozad')

或者直接引用cdn或本地js

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>

舉例：

html：

<img class="lozad" data-src="image.png" />

js:

const observer=lozad(); // '.lozad'作為默認(rèn)類(lèi)選擇器
observer.observe();

自己引入dom：

const el=document.querySelector('img');
const observer=lozad(el); 
document.querySelectorAll()
observer.observe();

自定義配置：

const observer=lozad('.lozad', {
 rootMargin: '10px 0px', 
 threshold: 0.1
});
observer.observe();

背景圖片：

<div class="lozad" data-background-image="image.png">
</div>

IFrame：

<iframe data-src="embed.html" class="lozad"></iframe>

更多使用實(shí)例參考Github，提供了圖片、背景圖等使用方式

瀏覽器支持

支持大多數(shù)瀏覽器，如果不支持需要引入polyfill

總結(jié)

提升Web頁(yè)面的性能方法多種多樣，懶加載就是其中一種，如果你追求極致的性能，不妨試一試lozadjs，期待對(duì)你有所幫助！

、預(yù)加載

即圖片提前加載，可以保證圖片快速、無(wú)縫的發(fā)布，用戶需要查看時(shí)可直接從本地緩存中渲染，適用于圖片占據(jù)很大比例的網(wǎng)站。

二、懶加載

將圖片src賦值為一張默認(rèn)的圖片，當(dāng)用戶滾動(dòng)到可視區(qū)域的時(shí)候，再去加載真正的圖片；

實(shí)現(xiàn)：對(duì)于圖片過(guò)多的頁(yè)面，為了加速頁(yè)面加載速度，所以很多時(shí)候我們需要將頁(yè)面內(nèi)未出現(xiàn)在可視區(qū)域內(nèi)的圖片先不做加載，等到滾動(dòng)到可視區(qū)域后再去加載。

html代碼：

js代碼：

vue中實(shí)現(xiàn)懶加載

直接使用現(xiàn)成插件：vue-lazyload

App.vue

main.js

關(guān)于vue-lazyload更多用法請(qǐng)看這里：https://www.npmjs.com/package/vue-lazyload

言

圖片懶加載也是比較常見(jiàn)的一種性能優(yōu)化的方法，最近在用vue做一個(gè)新聞列表的客戶端時(shí)也用到了，這里就簡(jiǎn)單介紹下實(shí)現(xiàn)原理和部分代碼。

實(shí)現(xiàn)原理

加載頁(yè)面的時(shí)候，圖片一直都是流量大頭，針對(duì)圖片的性能方法也挺多的比如base64、雪碧圖等；懶加載也是其中一種，主要原理是將非首屏的圖片src設(shè)為一個(gè)默認(rèn)值，然后監(jiān)聽(tīng)窗口滾動(dòng)，當(dāng)圖片出現(xiàn)在視窗中時(shí)再給他賦予真實(shí)的圖片地址，這樣可以保證首屏的加載速度然后按需加載圖片。

具體代碼

首先在渲染時(shí)，圖片引用默認(rèn)圖片，然后把真實(shí)地址放在data-*屬性上面。

<image src='./../assets/default.png' :data-src='item.allPics' class='lazyloadimg'>

然后是監(jiān)聽(tīng)滾動(dòng)，直接用window.onscroll就可以了，但是要注意一點(diǎn)的是類(lèi)似于window的scroll和resize，還有mousemove這類(lèi)觸發(fā)很頻繁的事件，最好用節(jié)流(throttle)或防抖函數(shù)(debounce)來(lái)控制一下觸發(fā)頻率。underscore和lodash里面都有封裝這兩個(gè)方法，這里先不多做介紹了。

接著要判斷圖片是否出現(xiàn)在了視窗里面，主要是三個(gè)高度：1，當(dāng)前body從頂部滾動(dòng)了多少距離。2，視窗的高度。3，當(dāng)前圖片距離頂部的距離。offsetTop相關(guān)屬性可以參考這里，具體代碼如下：

window.onscroll=_.throttle(this.watchscroll, 200);

watchscroll () {

var bodyScrollHeight=document.body.scrollTop;// body滾動(dòng)高度
var windowHeight=window.innerHeight;// 視窗高度
var imgs=document.getElementsByClassName('lazyloadimg');
for (var i=0; i < imgs.length; i++) {
var imgHeight=imgs[i].offsetTop;// 圖片距離頂部高度
if (imgHeight < windowHeight + bodyScrollHeight) {
imgs[i].src=imgs[i].getAttribute('data-src');
img[i].className=img[i].className.replace('lazyloadimg','')
}
}
}
學(xué)習(xí)交流加群：230354270

結(jié)語(yǔ)

大概內(nèi)容就這么多了，下次可能會(huì)補(bǔ)充一下防抖節(jié)流源碼的實(shí)現(xiàn)。最后再補(bǔ)充兩個(gè)常見(jiàn)的滾動(dòng)判斷：

1.頁(yè)面滾動(dòng)離開(kāi)首屏(這時(shí)可顯示回到頂部的按鈕):document.body.scrollTop > window.innerHeight

2.頁(yè)面滾動(dòng)到底部了(這時(shí)可去調(diào)接口獲取更多內(nèi)容)：window.scrollY + window.innerHeight > document.body.offsetHeight

在線咨詢

上一篇：JavaScript和HTML文檔 - 網(wǎng)絡(luò)統(tǒng)計(jì)學(xué)編
下一篇：零基礎(chǔ)教你學(xué)前端-91、重排和重繪

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商