言

圖片懶加載也是比較常見的一種性能優化的方法，最近在用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

azyload圖片加載通常用在圖片很多的項目里，需要翻好幾頁，如果一打開頁面就將所有的圖片加載出來，會耗費很多性能，以及會讓用戶等待較長時間，為了有一個更好的用戶體驗，Lazyload圖片懶加載就應運而生。Lazyload讓圖片只有在可視區域時才會加載出來。

應用這個組件需要注意的點是，即便我們之前有安裝和引入vant框架，但這個Lazyload需要重新安裝重引用。

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)

準備工作：

1. 創建一個頁面: Lazyload.vue
2. 在router.js里配置Lazyload頁面的路由

{
 path: '/lazyload',
 name: 'lazyload',
 component: ()=> import('./views/Lazyload')
 }

1. 在index.vue里添加一項

<a href="javascript：void(0)" @click="$router.push('/lazyload')">
 <van-col span="6" class="marb20">
 <van-icon name="pending-deliver" />
 <div>Toast 圖片懶加載</div>
 </van-col>
</a>

至今為止呢，我們的首頁顯示的樣式子是這樣滴?不知道不覺間我們已經學完了33個組件了！哇噢，為自己歡呼一下吧！如果想看更多的內容，歡迎關注我，每天都有更新哈。

代碼演示Lazyload 圖片懶加載：

基本方法：

<img 
 class="img" 
 v-for="img in imageList"
 v-lazy="img"
>

v-lazy: 懶加載的圖片，其值為圖片的路徑。

data() {
 return {
 imageList: [
 require('../assets/01.jpg'),
 require('../assets/02.jpg'),
 require('../assets/03.jpg'),
 require('../assets/04.jpg'),
 ]
 }
 },

就在演示這段代碼時總是出錯，說找不到指令，最后發現是vant又更新了，需要重新安裝，這才成功。說明vant框架更新的頻率很高，用著會越來越好用的。以上代碼需要說明一點的是在data里引入圖片的方式，如果直接引用路徑會因為定位不到相對路徑會出錯，需require一下才可以。如圖：

背景懶加載：

<div 
 class="img" 
 v-for="img in imageList"
 v-lazy:background-image="img"
 />

css部分：

.img {
 width: 100%;
 height: 300px;
 background-size: 100%
}

背景圖片也是可以懶加載的，只不過改成了v-lazy:background-image="img"。這里需要注意的一點是需要給這個容器定義寬度和高度以及background-size。背景圖片顯示不出來。

模塊懶加載：

懶加載模塊會用到lazy-component，需要在main.js里設置一下。

Vue.use(VueLazyload, {
 lazyComponent: true
});

options有如下, options是在引入VueLazyload時設置：

loading: 加載時的圖片

error: 錯誤時的圖片

preload: 預加載高度的比例

azyComponent: 是否能懶加載模塊

<lazy-component>
 <img 
 class="img"
 v-for="img in imageList"
 v-lazy="img"
 >
 </lazy-component>

更多關于Lazyload應用方法可以看下官方文檔

到目前為止呢，Lazyload就演示完了！慶祝一下我們又學完一個組件啦！

今天就到這里啦。休息休息一會兒吧?明天繼續加油噢！加油