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/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…...
创建EasyCodeMybatisCodeHelperPro模板文件用于将数据库表生成前端json文件
在intellij idea中，通过插件EasyCodeMybatisCodeHelperPro，从现有的模板文件中选择一个复制粘贴，然后稍为修改，即可得到一个合适的模板文件。 现在的前端，越来越像后端。TypeScript替代了JavaScript，引入了…...
华为端口安全常用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地址的老化时间…...
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 —…...
利用XSS漏洞打cookie
目录 1、为什么要打cookie？ 2、怎样利用XSS来打cookie？ 3、利用Bluelotus_xssReceiver平台来打cookie 4、利用beef-xss平台来打cookie 上一篇给大家介绍了xss漏洞的基础知识，在本篇章将会介绍和演示一下利用xss漏洞打cookie的演示&#x…...
用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…...
实现防抖函数
// 防抖就是，事件触发 delay 秒后再执行，如果有重新的触发，重新计时 function debounce(func, delay) {if(typeof func ! function) {return}let timer 0return function () {if (timer) {clearTimeout(timer)timer null}timer setTimeout…...
MetaGPT task1学习
基础知识学习了解： 安装环境： 获取MetaGPT 使用pip获取MetaGPT pip install -i https://pypi.tuna.tsinghua.edu.cn/simple metagpt0.5.2 配置MetaGPT 完成MetaGPT后，我们还需要完成一些配置才能开始使用这个强力的框架，包括配…...
关于量子计算机的设想
从CPU架构说起 CISCRISCNISCCCSC CISC是复杂指令集计算机，以x86为代表； RISC是精简指令集计算机，以ARM为代表； NISC是无指令集计算机，CCSC是核-电路分离计算机，这两个是本文要讨论的内容。 如果没有指令…...
序列模型（4）—— Scaling Laws
本文介绍 LLM 训练过程中重要的 Scaling Laws，这是一个经验规律，指出了固定训练成本（总计算量FLOPs） C C C 时，如何调配模型规模（参数量） N N N 和训练 Token 数据量 D D D，才能实现…...
【软件测试学习笔记1】测试基础
1.软件测试的定义 软件的定义：控制计算机硬件工作的工具 软件的基本组成：页面客户端，代码服务器，数据服务器 软件产生的过程：需求产生（产品经理），需求文档，设计效果图…...
pytorch详细探索各种cnn卷积神经网络
目录 torch.nn.functional子模块详解 conv1d 用法和用途 使用技巧 适用领域 参数 注意事项 示例代码 conv2d 用法和用途 使用技巧 适用领域 参数 注意事项 示例代码 conv3d 用法和用途 使用技巧 适用领域 参数 注意事项 示例代码 conv_transpose1d 用法…...
OpenCV——八邻域断点检测
目录 一、理论基础1、八邻域2、断点检测 二、代码实现三、结果展示四、参考链接 OpenCV——八邻域断点检测由CSDN点云侠原创，爬虫自重。如果你不是在点云侠的博客中看到该文章，那么此处便是不要脸的爬虫。 一、理论基础 1、八邻域 图1 八邻域示意图 图…...
leetcode238:除自身以外数组的乘积
文章目录 1.使用除法（违背题意）2.左右乘积列表3.空间复杂度为O(1)的方法 在leetcode上刷到了这一题，一开始并没有想到好的解题思路，写篇博客再来梳理一下吧。 题目要求： 不使用除法在O(n)时间复杂度内 1.使用除法&am…...
VTK开发调试环境下载（VTK开发环境一步到位直接开发，无需自己配置编译 VS2017+Qt5.12.10+VTK）
一、无与伦比的优势 直接下载代码就可以调试的VTK代码仓库。 二、资源制作原理 这个资源根据VTK源码 编译出动态库文件 pdb lib dll 文件（ x64 debug ） 并将这两者同时放在一个代码仓库里，下载就能用。 三、使用方法（vtk-so…...
【JAVA】在 Queue 中 poll()和 remove()有什么区别
🍎个人博客：个人主页 🏆个人专栏：JAVA ⛳️ 功不唐捐，玉汝于成 目录 前言 正文 poll() 方法： remove() 方法： 区别总结： 结语 我的其他博客 前言 在Java的Queue接口中&…...
常用Java代码-Java中的Optional类和null安全编程
在Java中，Optional 是一个可以为null的容器对象。如果值存在则isPresent()方法返回true。调用get()方法会返回值，如果值为null则抛出NullPointerException。以下是一个详细的代码详解。 在之前的Java版本中，程序员需要手动检查是否为null&am…...
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…...
Java生成四位数随机验证码
引言： 我们生活中登录的时候都要输入验证码，这些验证码是为了增加注册或者登录难度，减少被人用脚本疯狂登录注册导致的一系列危害，减少数据库的一些压力。 毕竟那些用脚本生成的账号都是垃圾账号 本次实践：生成这样的…...
编程探秘：Python深渊之旅-----数据可视化（八）
客户提出了对数据报告和图表的具体要求，这使得团队需要快速掌握数据可视化的技巧。派超决定深入了解 Python 中的数据可视化工具。 派超（兴奋地）：我们有机会做些真正酷炫的数据报告了！我听说 Python 有很棒的图表库。…...
【VLM】Gated Attention, Gated DeltaNet
Gated Attention 和 Gated DeltaNet 是近期在长文本大模型（特别是探索 O(N)O(N)O(N) 线性复杂度的高效序列模型）中非常核心的架构创新。它们分别解决了传统 Transformer 在扩展上下文时面临的注意力坍缩（Attention Sinks）和线性注…...
如何掌握Node.js模块系统：Node.js-Design-Patterns-Third-Edition深度解析
如何掌握Node.js模块系统：Node.js-Design-Patterns-Third-Edition深度解析 【免费下载链接】Node.js-Design-Patterns-Third-Edition Node.js Design Patterns Third Edition, published by Packt 项目地址: https://gitcode.com/gh_mirrors/no/Node.js-Design-Pa…...
专业解析：Windows APK安装器的架构设计与跨平台应用部署实践
专业解析：Windows APK安装器的架构设计与跨平台应用部署实践 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 在移动应用生态日益多元化的今天，W…...
考公想上岸，真的要死磕这 5 件事！ 少一件，都容易陪跑[特殊字符]
1. 一定要专注备考别信 “随便学学就上岸”，每个人基础、时间、自律性完全不同。想上岸，就要全力以赴，半吊子真的很难赢。2. 能考的试尽量去考，多考多机会考公是概率题！多参加一场，就多一次上岸可能。先考上…...
【Verilog实战】从零掌握：语法规范与高效编码风格
1. Verilog语法规范入门：从"能跑"到"优雅" 第一次接触Verilog时，很多人会陷入"代码能跑就行"的误区。我刚开始做FPGA开发时，曾经写过一段让同事看了直皱眉头的代码：200行连成一片，变量名…...
如何高效下载抖音无水印视频的完整解决方案
如何高效下载抖音无水印视频的完整解决方案 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback support. 抖音批量下载工具&…...
AI智能体通信基站：统一HTTP请求管理，提升开发效率与稳定性
1. 项目概述：一个为AI智能体构建的“通信基站”如果你正在开发一个AI智能体（Agent），并且需要让它与各种外部服务（比如OpenAI、Anthropic的Claude，或者任何自定义的HTTP API）进行对话，…...
资源管理器老崩溃？可能是combase.dll在捣鬼，手把手教你用DISM和干净启动搞定它
深度解析Win10资源管理器崩溃：combase.dll故障诊断与系统级修复指南 当你在Windows 10中拖拽文件时突然遭遇黑屏闪烁，随后资源管理器自动重启，这种看似随机的崩溃往往与一个关键系统组件——combase.dll密切相关。作为COM基础库的核心文件&am…...
告别手动刷新！为你的Qt串口调试助手添加‘设备热插拔’自动感知功能
告别手动刷新！为你的Qt串口调试助手添加‘设备热插拔’自动感知功能 在嵌入式开发和硬件调试过程中，串口工具是不可或缺的得力助手。然而，大多数基础串口调试软件都存在一个令人困扰的痛点——当设备突然断开或新设备接入时，用户不…...
实战解析：XiaoMusic技术架构深度剖析与智能音箱语音控制实现方案
实战解析：XiaoMusic技术架构深度剖析与智能音箱语音控制实现方案 【免费下载链接】xiaomusic 使用小爱音箱播放音乐，音乐使用 yt-dlp 下载。 项目地址: https://gitcode.com/GitHub_Trending/xia/xiaomusic 在智能音箱生态中，小爱音箱…...