Vue利用vant实现图片懒加载

在加载图片的过程中，经常由于图片加载太慢导致界面不友好，可以通过懒加载的方式实现让图片加载完成后再显示原图
在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 官方文档