在加载图片的过程中,经常由于图片加载太慢导致界面不友好,可以通过懒加载的方式实现让图片加载完成后再显示原图
在Vue中,可以利用vant的组件Lazyload 图片懒加载来实现
官方网址 Lazyload
首先因为 LazyLoad 是Vue的指令,我们需要在 main.js 中引用它
import { Lazyload } from 'vant';
Vue.use(Lazyload);
页面中设置图片懒加载
<img v-lazy="url">
data () {
return{
url: '你的图片地址'
}
}
设置背景图片懒加载和图片懒加载不同
<div v-lazy:background-image="url"></div>
还有更多参数可以参考 vue-lazyload 官方文档