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>