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

Vant-ui图片懒加载

news 2026/3/27 14:39:42

核心代码

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

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,});//图片懒加载//公共--内容-主要用于图片懒加载 startvar 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`

Vant-ui图片懒加载

核心代码在你的全局顶部引入和初始化 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/3d2c8a7e2c0040488a8128c3e381d58…...

编程日记 2024/1/15 9:08:13

创建EasyCodeMybatisCodeHelperPro模板文件用于将数据库表生成前端json文件

在intellij idea中，通过插件EasyCodeMybatisCodeHelperPro，从现有的模板文件中选择一个复制粘贴，然后稍为修改，即可得到一个合适的模板文件。现在的前端，越来越像后端。TypeScript替代了JavaScript，引入了…...

编程日记 2024/1/15 9:07:11

华为端口安全常用3种方法配置案例

安全动态mac地址学习功能 [Huawei]int g0/0/01 interface GigabitEthernet0/0/1 port-security enable //开启安全 port-security max-mac-num 2 //最多为2个mac地址学习 port-security protect-action restrict //丢包带警告 port-security aging-time 1 //mac地址的老化时间…...

编程日记 2024/1/15 9:04:09

RH850P1X芯片学习笔记-Flash Memory

文章目录 FeaturesClock Supply Block DiagramFlash SizeMemory ConfigurationRegistersRegister Base AddressList of RegistersRegister Reset Condition 与Flash Memory相关的操作模式Functional OverviewOption BytesOPBT0 — Option Byte 0OPBT1 — Option Byte 1OPBT2 —…...

编程日记 2024/1/15 9:03:08

利用XSS漏洞打cookie

目录 1、为什么要打cookie？ 2、怎样利用XSS来打cookie？ 3、利用Bluelotus_xssReceiver平台来打cookie 4、利用beef-xss平台来打cookie 上一篇给大家介绍了xss漏洞的基础知识，在本篇章将会介绍和演示一下利用xss漏洞打cookie的演示&#x…...

编程日记 2024/1/15 9:01:07

用java写个redis工具类

下面是一个简单的Redis工具类的示例，使用Java语言编写： import redis.clients.jedis.Jedis;public class RedisUtils {private static Jedis jedis;public static void connect(String host, int port) {jedis new Jedis(host, port);}public static v…...

编程日记 2024/1/15 9:00:06

实现防抖函数

// 防抖就是，事件触发 delay 秒后再执行，如果有重新的触发，重新计时 function debounce(func, delay) {if(typeof func ! function) {return}let timer 0return function () {if (timer) {clearTimeout(timer)timer null}timer setTimeout…...

编程日记 2024/1/15 8:59:05

MetaGPT task1学习

基础知识学习了解： 安装环境： 获取MetaGPT 使用pip获取MetaGPT pip install -i https://pypi.tuna.tsinghua.edu.cn/simple metagpt0.5.2 配置MetaGPT 完成MetaGPT后，我们还需要完成一些配置才能开始使用这个强力的框架，包括配…...

编程日记 2024/1/15 8:57:03

关于量子计算机的设想

从CPU架构说起 CISCRISCNISCCCSC CISC是复杂指令集计算机，以x86为代表； RISC是精简指令集计算机，以ARM为代表； NISC是无指令集计算机，CCSC是核-电路分离计算机，这两个是本文要讨论的内容。如果没有指令…...

编程日记 2024/1/15 8:55:02

序列模型（4）—— Scaling Laws

本文介绍 LLM 训练过程中重要的 Scaling Laws，这是一个经验规律，指出了固定训练成本（总计算量FLOPs） C C C 时，如何调配模型规模（参数量） N N N 和训练 Token 数据量 D D D，才能实现…...

编程日记 2024/1/15 8:53:00

【软件测试学习笔记1】测试基础

1.软件测试的定义软件的定义：控制计算机硬件工作的工具软件的基本组成：页面客户端，代码服务器，数据服务器软件产生的过程：需求产生（产品经理），需求文档，设计效果图…...

编程日记 2024/1/15 8:48:55

pytorch详细探索各种cnn卷积神经网络

目录 torch.nn.functional子模块详解 conv1d 用法和用途使用技巧适用领域参数注意事项示例代码 conv2d 用法和用途使用技巧适用领域参数注意事项示例代码 conv3d 用法和用途使用技巧适用领域参数注意事项示例代码 conv_transpose1d 用法…...

编程日记 2024/1/15 8:47:54

OpenCV——八邻域断点检测

目录一、理论基础1、八邻域2、断点检测二、代码实现三、结果展示四、参考链接 OpenCV——八邻域断点检测由CSDN点云侠原创，爬虫自重。如果你不是在点云侠的博客中看到该文章，那么此处便是不要脸的爬虫。一、理论基础 1、八邻域图1 八邻域示意图图…...

编程日记 2024/1/15 8:46:53

leetcode238:除自身以外数组的乘积

文章目录 1.使用除法（违背题意）2.左右乘积列表3.空间复杂度为O(1)的方法在leetcode上刷到了这一题，一开始并没有想到好的解题思路，写篇博客再来梳理一下吧。题目要求： 不使用除法在O(n)时间复杂度内 1.使用除法&am…...

编程日记 2024/1/15 8:45:53

VTK开发调试环境下载（VTK开发环境一步到位直接开发，无需自己配置编译 VS2017+Qt5.12.10+VTK）

一、无与伦比的优势直接下载代码就可以调试的VTK代码仓库。二、资源制作原理这个资源根据VTK源码编译出动态库文件 pdb lib dll 文件（ x64 debug ） 并将这两者同时放在一个代码仓库里，下载就能用。三、使用方法（vtk-so…...

编程日记 2024/1/15 8:43:51

【JAVA】在 Queue 中 poll()和 remove()有什么区别

🍎个人博客：个人主页 🏆个人专栏：JAVA ⛳️ 功不唐捐，玉汝于成目录前言正文 poll() 方法： remove() 方法： 区别总结： 结语我的其他博客前言在Java的Queue接口中&…...

编程日记 2024/1/15 8:41:49

常用Java代码-Java中的Optional类和null安全编程

在Java中，Optional 是一个可以为null的容器对象。如果值存在则isPresent()方法返回true。调用get()方法会返回值，如果值为null则抛出NullPointerException。以下是一个详细的代码详解。在之前的Java版本中，程序员需要手动检查是否为null&am…...

编程日记 2024/1/15 8:40:48

android.os.NetworkOnMainThreadException

问题 android.os.NetworkOnMainThreadException详细问题核心代码如下： import android.os.Bundle;import androidx.appcompat.app.AppCompatActivity;import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import ja…...

编程日记 2024/1/15 8:39:46

Java生成四位数随机验证码

引言： 我们生活中登录的时候都要输入验证码，这些验证码是为了增加注册或者登录难度，减少被人用脚本疯狂登录注册导致的一系列危害，减少数据库的一些压力。毕竟那些用脚本生成的账号都是垃圾账号本次实践：生成这样的…...

编程日记 2024/1/15 8:38:46

编程探秘：Python深渊之旅-----数据可视化（八）

客户提出了对数据报告和图表的具体要求，这使得团队需要快速掌握数据可视化的技巧。派超决定深入了解 Python 中的数据可视化工具。派超（兴奋地）：我们有机会做些真正酷炫的数据报告了！我听说 Python 有很棒的图表库。…...

编程日记 2024/1/15 8:37:45

如何快速打造微信风格视频编辑功能？推荐开源神器WeiXinRecordedDemo

如何快速打造微信风格视频编辑功能？推荐开源神器WeiXinRecordedDemo 【免费下载链接】WeiXinRecordedDemo 仿微信视频拍摄UI, 基于ffmpeg的视频录制编辑项目地址: https://gitcode.com/gh_mirrors/we/WeiXinRecordedDemo WeiXinRecordedDemo是一款基于FFmpe…...

编程新知 2026/3/27 13:51:14

MacBook Pro本地部署OpenClaw：百川2-13B量化模型7×24小时运行方案

MacBook Pro本地部署OpenClaw：百川2-13B量化模型724小时运行方案 1. 为什么选择MacBook Pro部署OpenClaw？ 去年冬天，当我第一次尝试在MacBook Pro上部署量化版百川2-13B模型时，身边的朋友都觉得我疯了。"M1芯片能跑得动13B…...

编程新知 2026/3/27 10:59:51

开源项目 Git 贡献全流程拆解：从入门到精通

好的，这是一篇关于开源项目 Git 贡献全流程拆解的技术文章大纲：开源项目 Git 贡献全流程拆解：从入门到精通引言开源精神与协作的重要性。Git 作为分布式版本控制系统在开源世界的核心地位。明确目标：清晰、完整地拆解向开源项目贡…...

编程新知 2026/3/27 9:00:47

音乐解密技术探秘：从加密困境到跨平台解决方案

音乐解密技术探秘：从加密困境到跨平台解决方案【免费下载链接】unlock-music 在浏览器中解锁加密的音乐文件。原仓库： 1. https://github.com/unlock-music/unlock-music ；2. https://git.unlock-music.dev/um/web 项目地址: https://gitc…...

编程新知 2026/3/27 8:42:38

基于WebSocket与Protobuf协议的抖音直播间实时数据采集方案

基于WebSocket与Protobuf协议的抖音直播间实时数据采集方案【免费下载链接】DouyinLiveWebFetcher 抖音直播间网页版的弹幕数据抓取（2024最新版本） 项目地址: https://gitcode.com/gh_mirrors/do/DouyinLiveWebFetcher 技术背景与挑战在当今直…...

编程新知 2026/3/27 8:18:30

面向对象编程入门（下篇）：继承、封装与多态

在上篇中，我们学会了如何定义类和创建对象，将现实世界的事物用代码表示。今天，我们将深入面向对象编程的三大核心特性：继承、封装和多态。这些特性将让你的代码更加灵活、可扩展和易维护。一、继承：代码复用的“家族传…...

编程新知 2026/3/27 7:46:15

终极Ghidra安装指南：5分钟在Ubuntu系统快速部署逆向工程神器

终极Ghidra安装指南：5分钟在Ubuntu系统快速部署逆向工程神器【免费下载链接】ghidra_installer Helper scripts to set up OpenJDK 11 and scale Ghidra for 4K on Ubuntu 18.04 / 18.10 项目地址: https://gitcode.com/gh_mirrors/gh/ghidra_installer 想要…...

编程新知 2026/3/27 6:57:25

[OS] 非阻塞键盘输入检测（kbhit）在实时交互应用中的实现与优化

1. 为什么需要非阻塞键盘输入检测？ 想象一下你在玩一个简单的终端游戏，比如贪吃蛇。如果游戏在每次等待你按键时都暂停执行，直到你按下某个键才继续，那体验会有多糟糕？这就是阻塞式输入的问题——程序会卡在输入等待环…...

编程新知 2026/3/27 6:47:22

Informer实战指南：从ProbSparse自注意力到生成式解码器的长序列预测优化

1. Informer模型的核心突破：为什么比Transformer更适合长序列预测？ 第一次看到Informer论文时，最让我惊讶的是它在AAAI 2021上击败了众多Transformer变体获得最佳论文。这个专为长序列预测（Long Sequence Time-series Forecasting…...

编程新知 2026/3/27 6:19:03

实测有效方案：星图平台一键部署Qwen3-VL:30B，接入飞书提升办公效率

实测有效方案：星图平台一键部署Qwen3-VL:30B，接入飞书提升办公效率 1. 为什么选择Qwen3-VL:30B作为办公助手 1.1 办公场景中的图文处理痛点在日常办公中，我们经常遇到需要同时处理图片和文字的场景。比如会议结束后，群里堆满了…...

编程新知 2026/3/27 6:05:01

核心代码

重要的话说三遍

重点

文档说明

重点

Lazyload 懒加载，配置说明

相关文章：