介紹： vue-lazyload主要應用於圖片延遲載入。包含如下的特點：

• 小巧輕便，功能強大，易於使用
• 可以用於載入任何影象型別
• 支援Vue 1.0和Vue 2.0

理解圖片延遲載入:

當某個網頁中呈現的圖片較多時，由於網路等原因，訪問該網頁時，所有的圖片不會立馬全部進行顯示出來，會出現一定的網路延遲載入的現象，影響使用者體驗；但我們可以vue-lazyload外掛來實現在圖片載入的過程中，先顯示出預設的載入圖片，直到圖片完全顯示，預設圖片消失，這樣就會大大的提升使用者體驗。

使用方法如下：

1、通過npm安裝

npm install vue-lazyload -s
複製程式碼

2、在main.js中進行引用

import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  preLoad: 1.3, // 預壓高度的比例
  error: '../assets/img/no-pic.png', // 影象的載入失敗時 顯示的error圖示
  loading: '../assets/imgLoading.png', // 影象正常載入時 顯示的loading圖示
  attempt: 1 // 影象嘗試載入 次數
})

複製程式碼

3、在元件中使用

<img v-lazy="item.picUrl" alt="">
 

圖片地址就是item.picUrl，一般寫介面中拿到的圖片地址變數