Vant-ui图片懒加载

---

核心代码

在你的全局顶部引入和初始化

Vue.use(vant.Lazyload, {
    loading: '/StaticFile/img/jiazai.jpg',
    error: '/StaticFile/img/jiazai.jpg',
    lazyComponent: false,
});//图片懒加载

重要的话说三遍

如果你的v-lazy属性里写的不是变量，而是具体路径的话，

具体路径一定要用引号包住；

具体路径一定要用引号包住；

具体路径一定要用引号包住；

如上；如果是一个变量则不需要

因为Vant在处理的时候会把v-lazy属性的值当做JS来处理；

比如下面的代码

//加了引号的值
var imgUrl='https://img01.yzcdn.cn/vant/cat.jpeg';

//没加引号的值，这样的代码在语法上是错误的，所以，在使用时，请特别注意
var imgUrl=https://img01.yzcdn.cn/vant/cat.jpeg;

具体路径一定要用引号包住；

具体路径一定要用引号包住；

具体路径一定要用引号包住；

重点

该代码必须在vue下才能正常运行。 如果你的项目是Vue脚手架搭建，请自动绕过。

如果你的Vant是引入的，操作方式如下

---

文档说明

官方地址：

Image 图片：Vant 2 - Mobile UI Components built on Vue

Lazyload 懒加载：Vant 2 - Mobile UI Components built on Vue

重点

我上面的代码只用了【Lazyload懒加载】，没有使用【Image 图片】

Lazyload 懒加载，配置说明

	Vue.use(vant.Lazyload, {
		loading: '/StaticFile/img/jiazai.jpg',
		error: '/StaticFile/img/jiazai.jpg',
		lazyComponent: false,
	});

参数	说明	类型	默认值
loading	加载时的图片	string	-
error	错误时的图片	string	-
preload	预加载高度的比例	string	-
attempt	尝试次数	number	3
listenEvents	监听的事件	string[]	scroll等
adapter	适配器	object	-
filter	图片 URL 过滤	object	-
lazyComponent	是否能懒加载模块	boolean	false