当前位置: 首页 > 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;它们允许开发者根据…...

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

Spring Boot 实现流式响应(兼容 2.7.x)

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

Frozen-Flask :将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎?2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长,文件大。2.其次,树深,IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

Android Bitmap治理全解析:从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持,SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库(解决显示问题) sudo apt install fonts-wqy…...

Go 并发编程基础:通道(Channel)的使用

在 Go 中&#xff0c;Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式&#xff0c;用于在多个 Goroutine 之间传递数据&#xff0c;从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...