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