vue-lazyload圖檔懶加載的使用(vue常用插件)

vue-lazyload圖檔懶加載

當打開一個網頁有很多圖檔,同時加載這麼多圖檔網頁肯定會比較卡頓,要是隻加載可視區的圖檔,其他圖檔用占位圖代替,當滾動到它們時再加載原來的圖檔,這樣的話網頁流暢度提高了不少.

1.安裝

本例是利用npm安裝vue-lazyload,是以使用的電腦需要安裝node。

npm install vue-lazyload [email protected]
           

2.main.js導入,并注冊

• 不傳參數,簡單使用

import VueLazyLoad from "vue-lazyload";
//使用懶加載插件
Vue.use(VueLazyLoad)
           

• 安裝時可以傳一些參數

Vue.use(VueLazyLoad, {
//圖檔還沒加載出來,顯示的占位圖檔
  loading:   require("assets/img/common/placeholder.png") 	
//圖檔加載失敗顯示的圖檔
  error:
require("assets/img/common/error.png") 
})
           

3.元件中使用

src屬性改為v-lazy

<img v-lazy="showImage" alt="">