最近做项目，一页图片很多，加载的时候效果很差。
通过学习借鉴其他大神的方法，使用了插件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>