Vant-ui图片懒加载
- 手机
- 2025-08-06 05:00:01
核心代码
在你的全局顶部引入和初始化
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尝试次数number3listenEvents监听的事件string[]scroll等adapter适配器object-filter图片 URL 过滤object-lazyComponent是否能懒加载模块booleanfalseVant-ui图片懒加载由讯客互联手机栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“Vant-ui图片懒加载”
