使用vue-lazyload的作用:
当网络请求比较慢的时候,提前给这张图片添加一个像素比较低的占位图片,不至于堆叠在一块,或显示大片空白,让用户体验更好一点。
1.在项目下安装插件vue-lazyload
npm install vue-lazyload --save
2.在main.js全局引用vue-lazyload
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload,{
error:'img/error.png',
loading:'img/loading.png'
})
3.使用vue-lazyload
<ul>
<li v-for="img in lists">
<img v-lazy="img.imgUrl">
</li>
</ul>