vue + vue-lazyload 實現圖片懶加載

1.安裝

npm i vue-lazyload -S

2.配置 main.js

/***圖片模板等懶加載 start ***/
import VueLazyload from 'vue-lazyload'
// 404圖片
import errImg from './assets/img/404.png'
// loading圖片
import loadingImg from './assets/img/loading-spin.svg'

// 圖片懶加載配置
Vue.use(VueLazyload, {
  preLoad: 1.3, // 預加載高度比例
  error: errImg, // 圖片路徑錯誤時加載圖片
  loading: loadingImg, // 預加載圖片
  attempt: 1, // 嘗試加載圖片數量
  // set observer to true
  observer: true,
  // optional
  observerOptions: {
    rootMargin: '0px',
    threshold: 0.1
  }
})
/***圖片模板等懶加載 end ***/

3.調用

<!-- 圖片懶加載-->
<img v-lazy="picUrl" />

.