vue 实现图片懒加载

1.安装vue-lazyload

npm install vue-lazyload --save-dev

2.在入口文件main.js中引入并使用

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)

或者添加自定义选项

Vue.use(VueLazyload, {

      preLoad: 1.3,

      error: 'dist/error.png',

      loading: 'dist/loading.gif',

扫描二维码关注公众号，回复： 9572079 查看本文章

      attempt: 1

})

3.将 :src 属性直接改为v-lazy

<img v-lazy="item.productImage">

vue-lazyload/官网 详情配置可进入官网api进行配置

https://www.npmjs.com/package/vue-lazyload