vue中实现图片懒加载的方法

我们使用软件的时候，会有很多图片需要加载，但是当网络环境不好，或内存不足的情况，就会导致用户首屏加载特别慢，影响用户体验，所以为了解决这个问题，提出了图片懒加载的方法来解决该问题。

实现方法(使用vue的vue-lazyload插件)

1. 安装插件：npm install vue-lazyload --save-dev

2. 在入口文件main.js中引入并使用：import VueLazyload from 'vue-lazyload'

3.直接使用：Vue.use(VueLazyload)

或者添加自定义选项：

Vue.use(VueLazyload, {

preLoad: 1.3,

error: 'dist/error.png',

loading: 'dist/loading.gif',

attempt: 1

})

4.修改图片显示方式为懒加载（将 :src 属性直接改为v-lazy）

<a href="javascript:;"><img v-lazy="'/static/img/' + item.productImage"></a>