么是懶加載？

在Web開發中經常會遇到一些性能問題，有很多原因就是因為一次性請求過多導致的，而懶加載是一種在不影響原有界面，當界面需要展現給用戶才進行加載和請求，常見的就是圖片的加載，在很多電商頁面中最常見，通過懶加載的方式提升了頁面的性能，用戶體驗也會更好了。

為什么使用lozad.js

現有的延遲加載庫依賴窗體的滾動事件，或者使用定期計時器并調用在需要延遲加載的元素上getBoundingClientRect()。然而，這種方法非常緩慢，因為每次調用getBoundingClientRect()強制瀏覽器重新布局整個頁面而lozad.js不依賴這些，因此性能很好。

lozad.js介紹

• Github地址

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

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

特點

• 純js實現
• 非常輕量，壓縮后只有1.04kb
• 零依賴
• 允許延遲加載動態添加的元素
• 支持圖片、iframe、視頻、音頻、背景圖片等
• 免費開源

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

安裝使用

• 安裝

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'作為默認類選擇器
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>

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

瀏覽器支持

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

總結

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

、預加載

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

二、懶加載

將圖片src賦值為一張默認的圖片，當用戶滾動到可視區域的時候，再去加載真正的圖片；

實現：對于圖片過多的頁面，為了加速頁面加載速度，所以很多時候我們需要將頁面內未出現在可視區域內的圖片先不做加載， 等到滾動到可視區域后再去加載。

html代碼：

js代碼：

vue中實現懶加載

直接使用現成插件：vue-lazyload

App.vue

main.js

關于vue-lazyload更多用法請看這里：https://www.npmjs.com/package/vue-lazyload

言

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

實現原理

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

具體代碼

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

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

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

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

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

watchscroll () {

var bodyScrollHeight=document.body.scrollTop;// body滾動高度

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','')

}

}

}

學習交流加群：230354270

結語

大概內容就這么多了，下次可能會補充一下防抖節流源碼的實現。最后再補充兩個常見的滾動判斷：

1.頁面滾動離開首屏(這時可顯示回到頂部的按鈕):document.body.scrollTop > window.innerHeight

2.頁面滾動到底部了(這時可去調接口獲取更多內容)：window.scrollY + window.innerHeight > document.body.offsetHeight