详情请参考,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循环,产品列表图片遍历的