vue中使用lazyload實作圖檔懶加載

原理：先将img标簽的src連結設為同一張圖檔（比如空白圖檔），然後給img标簽設定自定義屬性（比如 data-src）,然後将真正的圖檔位址存儲在data-src中，當JS監聽到該圖檔元素進入可視視窗時，将自定義屬性中的位址存儲到src屬性中。達到懶加載的效果，這樣做能防止頁面一次性向伺服器發送大量請求，導緻伺服器響應面，頁面卡頓崩潰等。

目錄

​​第一步:安裝lazyload​​

第一步:安裝lazyload

npm i vue-lazyload -S      

第二步:main.js導入lazyload

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
  loading: require('assets/images/lazy.png'),
  error: require('assets/images/error.png'),
})      

第三步:頁面使用lazyload,将src改為v-lazy

<img v-lazy="item.image" />       

第四步:修改加載圖檔的樣式

img[lazy=loading]{
  transform:scaleX(0.3) scaleY(0.5);
}
img[lazy=loaded]{
  animation:appear 0.3s;  //加載的圖檔顯示的動畫
  animation-fill-mode: both;
}
@keyframes appear {
  from{
    opacity:0;
  }
  to{
    opacity:1;
  }
}