vue中实现图片呢懒加载的过程（vue-lazyload)插件的使用方法）

 

1.安装插件
 

npm install vue-lazyload --save-dev

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

import VueLazyload from 'vue-lazyload'

3.main.js中use使用  --或者进行自定义

Vue.use(VueLazyload)

 

main.js 中自定义示例
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
})

3.组件中显示方式为懒加载（将 :src 属性直接改为v-lazy）
 

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