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

Vue2图片懒加载(vue-lazyload)

参考文档:vue-lazyload

安装插件

npm install vue-lazyload
# or
yarn add vue-lazyload
# or
pnpm add vue-lazyload

使用

使用方式 一:

所有懒加载图片的占位图使用同一张默认图片

  1. 引入并注册
// main.js
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload) // 注册方式一,使用默认配置
Vue.use( // 注册方式二,自定义配置相关图片和监听方法类型VueLazyload,{preLoad: 1.3, // 默认 1.3error: require('./assets/images/default.png'),loading: require('./assets/images/default.png'), // ../dist/default.pngattempt: 1, // 默认 3// the default is ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend']listenEvents: ['scroll']}
)
  1. 在页面中使用
  • img 标签中使用懒加载,将 src 替换为 v-lazy,需要动态切换图片时,务必添加 key 属性
<img v-lazy="src" :key="src" class="u-img" />
  • background 背景图中使用懒加载,v-lazy:background-image
<div v-lazy:background-image="src" :key="src" class="u-bg"></div>

使用方式 二:

不同页面的懒加载使用不同的默认图

  1. 引入并注册
// main.js
import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad, {preLoad: 1.3,attempt: 1
})
  1. 在页面中使用
  • img 标签中使用懒加载,同时自定义默认图
<img v-lazy="getDefault(src)" :key="src" :alt="title" class="u-img"/>
getDefault (src) {return {src: src,error: require('../assets/images/defaultNews.png'),loading: require('../assets/images/defaultNews.png')}
}
  • background 背景图中使用懒加载,同时自定义默认图
<a v-lazy:background-image="getDefault(src)" :key="src" class="u-img"></a>
// 自定义使用的默认图
getDefault (src) {return {src: src,error: require('../assets/images/defaultLogo.png'),loading: require('../assets/images/defaultLogo.png') // 指定相应要使用的默认图}
}
  • 默认图使用网络图片 https
<img v-lazy="imgObj"/>
<div v-lazy:background-image="imgObj"></div>
imgObj: {src: 'http://xx.com/logo.png',error: 'http://xx.com/error.png',loading: 'http://xx.com/loading-spin.svg'
}

相关文章:

Vue2图片懒加载(vue-lazyload)

参考文档&#xff1a;vue-lazyload 安装插件 npm install vue-lazyload # or yarn add vue-lazyload # or pnpm add vue-lazyload使用 使用方式 一&#xff1a; 所有懒加载图片的占位图使用同一张默认图片 引入并注册 // main.js import VueLazyload from vue-lazyload Vue…...

Jenkins-拉取代码

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、Jenkins环境配置&#xff08;一&#xff09;配置Maven环境&#xff08;1&#xff09;Maven下载&#xff08;2&#xff09;将Maven上传服务器&#xff08;3&…...

深度解析:.secret勒索病毒如何加密你的数据并勒索赎金

引言&#xff1a; 在当今这个数字化、信息化的时代&#xff0c;网络安全已成为一个不容忽视的重要议题。随着互联网的普及和技术的飞速发展&#xff0c;我们的生活、工作乃至整个社会的运转都越来越依赖于各种计算机系统和网络。然而&#xff0c;这种高度依赖也为我们带来了前…...

测试岗位应该学什么

以下是测试岗位需要学习的一些关键内容&#xff1a; 1. 测试理论和方法 - 了解不同类型的测试&#xff0c;如功能测试、性能测试、压力测试、安全测试、兼容性测试等。 - 掌握测试策略和测试计划的制定。 2. 编程语言 - 至少熟悉一种编程语言&#xff0c;如 Python、Java…...

【RISC-V设计-12】- RISC-V处理器设计K0A之验证环境

【RISC-V设计-12】- RISC-V处理器设计K0A之验证环境 文章目录 【RISC-V设计-12】- RISC-V处理器设计K0A之验证环境1.简介2.验证顶层3.顶层代码4.模型结构4.1 地址映射4.2 特殊功能寄存器 5.模型代码6.运行脚本7.总结 1.简介 在前几篇文章中&#xff0c;分别介绍了各个模块的设…...

react-redux的使用

关于react-redux 首先&#xff1a;react-redux和redux并不是一个东西&#xff0c;redux是一个独立的东西&#xff0c;react-redux是react官方根据市场偏好redux推出的react插件库。 了解react-redux的原理图&#xff1a; 安装&#xff1a;npm i react-redux redux的ui组件和…...

大模型在chat bi 场景下的优化思路

文章目录 背景提示词模版表结构注释示例数据给出示例答案语法验证外挂知识库 背景 大模型的出现使chat bi 成为一种可能&#xff0c;自然语句的交互&#xff0c;极大的提高了数据分析的效率&#xff0c;也极大的降低了用户使用的门槛。下面主要列出几点提高自然语句转成SQL的技…...

Qt登录窗口

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget),btn(new QPushButton("取消", this)),login_btn(new QPushButton("登录", this)) { ui->setupUi(this);thi…...

Zookeeper的在Ubuntu20.04上的集群部署

安装资源 官方安装包下载地址&#xff1a;https://zookeeper.apache.org/releases.html 懒得找版本的可以移步下载zookeeper3.84稳定版本&#xff1a; https://download.csdn.net/download/qq_43439214/89646735 安装方法 创建安装路径&&解压安装包 # 创建路径 m…...

Qt+OpenCV配置和测试

一、前言 OpenCV作为比较大众化的跨平台计算机视觉开源库&#xff0c;可以运行在多种操作系统上&#xff0c;通过与Qt的结合&#xff0c;能够轻松的是实现一些图像处理和识别的任务&#xff0c;本文在Windows操作系统的基础上具体讲解Qt和OpenCV的配置和环境搭建方法&#xff…...

Ruby GUI宝典:探索顶级图形界面库

标题&#xff1a;Ruby GUI宝典&#xff1a;探索顶级图形界面库 Ruby&#xff0c;这门以优雅和简洁著称的语言&#xff0c;不仅在服务器端编程中大放异彩&#xff0c;其在图形用户界面&#xff08;GUI&#xff09;开发上同样拥有不可忽视的地位。本文将带领大家深入了解Ruby的G…...

探索Jinja2的神秘力量:Python模板引擎的魔法之旅

文章目录 探索Jinja2的神秘力量&#xff1a;Python模板引擎的魔法之旅1. 背景&#xff1a;为何选择Jinja2&#xff1f;2. 什么是Jinja2&#xff1f;3. 安装Jinja2&#xff1a;一键启程4. 基础用法&#xff1a;Jinja2的五大法宝5. 实战演练&#xff1a;Jinja2在场景中的应用6. 常…...

Vue3小兔仙电商项目实战

Vue3小兔仙电商项目实战 项目技术栈 create-vuePiniaElementPlusVue3-SetupVue-RouterVueUse 项目规模 项目亮点&#xff1a; 基于业务逻辑的组件拆分思想 长页面吸顶交互实现SKU电商组件封装图片懒加载指令封装通用逻辑函数封装面板插槽组件等业务通用组件封装路由缓存问题…...

MATLAB基础应用精讲-【数模应用】肯德尔协调系数(附MATLAB、R语言和python代码实现)

目录 前言 几个高频面试题目 肯德尔协调系数低原因? 知识储备 相关性分析对比 1 相关分析 2 Cochrans Q 检验 3 Kappa一致性检验 4 Kendall协调系数 5 组内相关系数 算法原理 数学模型 SPSSPRO:Kendall一致性检验 1、作用 2、输入输出描述 3、案例示例 4、案…...

计算函数(c语言)

1.描述 //小乐乐学会了自定义函数&#xff0c;BoBo老师给他出了个问题&#xff0c;根据以下公式计算m的值。 // //其中 max3函数为计算三个数的最大值&#xff0c;如&#xff1a; max3(1, 2, 3) 返回结果为3。 //输入描述&#xff1a; //一行&#xff0c;输入三个整数&#xff…...

Linux 7 x86平台上安装达梦8数据库

1、环境描述 2、安装前准备 2.1 操作系统信息调研 Linux平台需要通过命令查看操作系统版本、位数、磁盘空间、内存等信息。 CPU信息 [rootray1 ~]# cat /proc/cpuinfo | grep -E "physical id|core id|cpu cores|siblings|cpu MHz|model name|cache size"|tail -n…...

【老张的程序人生】我命由我不由天:我的计算机教师中级岗之旅

在计算机行业的洪流中&#xff0c;作为一名20年计算机专业毕业的博主&#xff0c;我深知这几年就业的坎坷与辉煌。今天&#xff0c;我想与大家分享我的故事&#xff0c;一段关于梦想、挑战与坚持的计算机教师中级岗之旅。希望我的经历能为大家提供一个发展方向&#xff0c;在计…...

1.Linux_常识

UNIX、Linux、GNU 1、UNIX UNIX是一个分时操作系统&#xff0c;特点是多用户、多任务 实时操作系统&#xff1a;来了请求就去解决请求 分时操作系统&#xff1a;来了请求先存着&#xff0c;通过调度轮到执行时执行 2、Linux Linux是一个操作系统内核 发行版本&#xff1…...

下载文件--后端返回文件数据,前端怎么下载呢

问题&#xff1a;有个功能是将tabel数据导出&#xff0c;并且后端写了个接口&#xff0c;这个接口返回你要下载的excel文件数据了。前端请求接口就行&#xff0c;然后下载下来&#xff0c;但前端该怎么操作&#xff08;发起请求呢&#xff09; /*** 导出文件* param {string} …...

CSS方向选择的艺术:深入探索:horizontal和:vertical伪类

CSS&#xff08;层叠样式表&#xff09;是构建网页视觉表现的核心工具。随着CSS规范的不断更新&#xff0c;我们拥有了更多的选择器来精确控制网页元素的样式。其中&#xff0c;:horizontal和:vertical伪类是CSS Level 4中引入的两个实验性选择器&#xff0c;它们允许开发者根据…...

19c补丁后oracle属主变化,导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达,从日常对话到特定领域的文档(例如医学文档)(Heritage 2013;Landmark、Gulbrandsen 和 Svenevei…...

让回归模型不再被异常值“带跑偏“,MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...

基于Java Swing的电子通讯录设计与实现:附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...

PAN/FPN

import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...

深度学习水论文:mamba+图像增强

&#x1f9c0;当前视觉领域对高效长序列建模需求激增&#xff0c;对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模&#xff0c;以及动态计算优势&#xff0c;在图像质量提升和细节恢复方面有难以替代的作用。 &#x1f9c0;因此短时间内&#xff0c;就有不…...

C++.OpenGL (20/64)混合(Blending)

混合(Blending) 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...