vue实现图片懒加载

详情请参考，vue-lazyload官网api

1.安装插件

npm install vue-lazyload --save-dev

2.在main.js中引入并使用

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)

或者

Vue.use(VueLazyload, {
preLoad: 1,    //预加载高度的比例
error: 'http://www.baidu.com/201807/123456789error.gif',  //图像的src加载失败
loading: 'http://www.baidu.com/201807/123456789loading.gif', //src的图像加载
attempt: 1,  //尝试计数
listenEvents: [ 'scroll', 'mousewheel' ] //你想要监听的事件（或者参考官网你需要的事件）
});

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

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

注：item.productImg是写的v-for循环，产品列表图片遍历的