vue項目中，單頁圖片過多，使用懶加載

最近做項目，一頁圖片很多，加載的時候效果很差。

通過學習借鑒其他大神的方法，使用了插件vue-lazyload，使用這個插件，界面更美觀了，加載的效果好起來。

安裝

npm i vue-lazyload --save

在main.js中加入下面代碼

import VueLazyload from 'vue-lazyload'  // 引入這個懶加載插件
// Vue.use(VueLazyload) // 直接使用
Vue.use(VueLazyload, { // 添加自定義選項
  preLoad: 1.3,
  error: '../static/icon/error.png', // 加載錯誤時候的圖片
  loading: '../static/icon/loading.png', // 加載中的圖片
  attempt: 7,
  listenEvents: [ 'scroll' ],
})　　

我在項目中的使用：

<li v-for="(items,index) in imgFiles" :key="index" @click="showImg(items)">
  <a href="javascript:void(0)" v-if="items.type === 'jpg' || items.type === 'jpeg' || items.type === 'png' || items.type === 'JPG'">
    <img v-lazy="items.src" alt="">
    <p>{{items.name}}</p>
  </a>
</li>