当前位置：首页 > news >正文

Vant-ui图片懒加载

news 来源：原创 2025/5/15 12:10:06

核心代码

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

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

 <img v-lazy="'https://img-blog.csdnimg.cn/direct/3d2c8a7e2c0040488a8128c3e381d58b.png'" alt="我是图片">

<img v-lazy="'图片路径'" alt="我是图片">

重要的话说三遍

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

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

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

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

<img v-lazy="imgUrl" alt="我是图片">

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

因为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是引入的，操作方式如下

 <!DOCTYPE html>
<html>
<head>
	<title>橙-极纪元JJY.Cheng</title>
	<meta name="keywords" content="橙-极纪元JJY.Cheng">
	<meta name="description" content="橙-极纪元JJY.Cheng">
	<script src="/StaticFile/Mob/js/common/vue2.6.14.min.js"></script>
	<link rel="stylesheet" href="/StaticFile/Mob/js/common/vant2.12.53/vant2.12.53.index.css" />
	<script src="/StaticFile/Mob/js/common/vant2.12.53/vant2.12.53.min.js"></script>
</head>
<body>
	<div class="QXUI-Box" id="CommonContentVueObj">
		  <img v-lazy="'https://img-blog.csdnimg.cn/direct/3d2c8a7e2c0040488a8128c3e381d58b.png'" alt="我是图片">
	</div>
	<script>
	Vue.use(vant.Lazyload, {
		loading: '/StaticFile/img/jiazai.jpg',
		error: '/StaticFile/img/jiazai.jpg',
		lazyComponent: false,
	});//图片懒加载
	//公共--内容-主要用于图片懒加载 start
	var CommonContentVueObj = new Vue({
		el: '#CommonContentVueObj',
		data: { 
		},
		created: function () {
		},
		methods: {
		}
	});
	//公共--内容-主要用于图片懒加载 end
	</script>
</body>
</html>

文档说明

官方地址：

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`