vue图片懒加载 —— vue-lazyload的使用

vue 插件的使用 （1）vue-lazyload

1.安装插件

cnpm i --save vue-lazyload

2.在 main.js中引入插件

import  VueLazyLoad  from 'vue-lazyload'Vue.use(VueLazyLoad,{  preLoad: 1,  error: require('../public/img/LOGO.png'), //图片加载失败显示的图片 loading: require('../public/img/LOGO.png'), //图片加载之前显示的图片  attempt: 2,})

3.vue文件中将需要懒加载的图片绑定 v-bind:src 修改为 v-lazy

 //  <img   :src='data.goodsImg'>                                                                                                                         <img   v-lazy="data.goodsImg"  /> 

4.总结

  img标签中使用懒加载：v-lazy 代替 v-bind:src ；背景图片中使用懒加载：v-lazy:background-image = ""  ==>> 注意图片和盒子大小问题，否则显示可能有问题哦。

5.插件地址：vue-lazyload