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

react/vue中前端多图片展示页面优化图片加载速度的五种方案

news 来源：原创 2025/9/14 12:10:00

需求背景

在多项目中例如官网项目中会出现很多大图片显示的情况这个时候就会出现图片过大公司带宽不够之类导致页面加载速度过慢及页面出现后图片仍然占位但并未加载出来或者因为网络问题导致图片区域黑块等等场景这个时候我们就要对图片和当前场景进行优化

方案定义

图片更换为avif或者webp格式缩减图片大小，若svg可对svg进一步压缩，vscode中有很多插件支持，但是没有直接使用avif和webp格式效果好
若公司有cdn合作商，可传入cdn，页面直接使用cdn链接
nginx配置brotli压缩进一步压缩体积
nginx配置开启浏览器缓存，提高后期体验感
对banner或主图进行预加载操作，其他图片正常使用懒加载，使其队列进行优先加载变化及优化后期例如国际化切换效果无感卡顿

预加载实现

//下方主要实现代码 需要放入vue的mounted或者react的useEffect中 banner1和banner2是首页顶部大图中英文两图  
const preloadImages = [banner1, banner2];preloadImages.forEach((src) => {const img = new Image();img.src = src;
});

react/vue中前端多图片展示页面优化图片加载速度的五种方案

需求背景在多项目中例如官网项目中会出现很多大图片显示的情况这个时候就会出现图片过大公司带宽不够之类导致页面加载速度过慢及页面出现后图片仍然占位但并未加载出来或者因为网络问题导致图片区域黑块等等场景这个时候我们就要对图片和当前场景进行优化方案定…...

编程日记 2025/9/14 12:10:00

第二届电气技术与自动化工程国际学术会议 (ETAE 2025)

重要信息 2025年4月25-27日中国广州官网: http://www.icetae.com/ 部分征稿主题 Track 1：电气工程输配电、电磁兼容、高电压和绝缘技术、电气工程、电气测量、电力电子及其应用、机电一体化、电路与系统、电能质量和电磁兼容性、电力系统及其自…...

编程日记 2025/9/14 12:06:07

Windows 图形显示驱动开发-WDDM 2.0功能_上下文监视

功能概述上下文监视机制是GPU与CPU协同计算的核心同步技术，通过受监视围栏（Monitored Fence）实现跨硬件单元的高效协调。其核心目标是解决以下场景的同步需求： GPU引擎间同步：例如在多渲染管线中，后处理…...

编程日记 2025/9/9 4:11:17

YOLOv12即插即用---PPA

1.模块介绍多分支特征提取：PPA 模块采用局部卷积、全局卷积和串行卷积三种并行分支，从多个尺度和层次提取特征，有效保留小目标在多次下采样过程中的关键信息。特征融合与注意力增强：在特征提取后，PPA 模块引入高效的通道注意力和空间注意力机制，实现自适应特征增强，…...

编程日记 2025/9/14 9:39:46

MySql主从相关概念

想象一下，你的业务飞速增长，用户请求如潮水般涌来，突然数据库主库宕机，数据丢失，服务瘫痪——这简直是开发者的噩梦！MySQL主从复制就像一张安全网，通过主库写、从库读的协作模式，不仅…...

编程日记 2025/9/10 7:50:53

精品推荐-最新大模型MCP核心架构及最佳实践资料合集（18份）.zip

精品推荐-最新大模型MCP核心架构及最佳实践资料合集，共18份。 1、2025年程序员必学技能：大模型MCP核心技术.pdf 2、MCP 架构设计剖析：从 Service Mesh 演进到 Agentic Mesh.pdf 3、MCP 架构设计深度剖析：使用 Spring AI MCP 四步…...

编程日记 2025/9/13 19:48:42

Qt模型-视图架构

引言在GUI开发中，数据与界面的同步一直是核心挑战。传统方法将数据存储在界面组件内部容器中，容易引发数据冗余和同步问题。Qt的模型-视图（Model-View）架构通过解耦数据与界面，提供了更优雅的解决方案。本文将深入剖…...

编程日记 2025/9/10 5:23:58

Transformers 是工具箱，BERT 是工具。

Transformers 是工具箱，BERT 是工具。 🔍 详细解释： 名称作用比喻理解举例🤖 transformers（库）一个框架，提供很多 NLP 模型的“使用方式”，包括文本分类、问答、摘要等相当于一个“…...

编程日记 2025/9/13 15:02:18

AI应用企业研发方案

一、引言在当今数字化时代，人工智能（AI）技术正以前所未有的速度融入各个行业，推动着企业的创新与变革。对于医药流通行业批发公司而言，面对日益激烈的市场竞争和不断变化的客户需求，借助AI技术提升企业的…...

编程日记 2025/9/11 1:14:27

Python实例题：Python实现iavaweb项目远端自动化更新部署

目录 Python实例题题目题目分析需求理解关键知识点实现思路分析代码实现代码解释 execute_remote_command 函数： deploy_java_web_project 函数： 主程序： 运行思路结束语 Python实例题题目 Python实现iavaweb项目远端…...

编程日记 2025/9/11 10:25:11

NO.90十六届蓝桥杯备战|动态规划-区间DP|回文字串|Treats for the Cows|石子合并|248(C++)

区间dp也是线性dp的⼀种，它⽤区间的左右端点来描述状态，通过⼩区间的解来推导出⼤区间的解。因此，区间DP的核⼼思想是将⼤区间划分为⼩区间，它的状态转移⽅程通常依赖于区间的划分点。常⽤的划分点的⽅式有两个： 基于…...

编程日记 2025/9/4 1:20:45

无人机在极端环境材料的选择

一、材料选择与优化 1. 耐低温/高温复合材料碳纤维增强聚合物（CFRP）：具备高强度、低膨胀系数特性，适用于极寒（-40℃）和高温（50℃）环境，减少因温度变化导致的结构变形。…...

编程日记 2025/9/4 21:02:10

视觉目标检测大模型GAIA

中国科学院自动化研究所智能感知与计算研究中心携手华为等领军企业，共同推出面向产业应用的视觉目标检测全流程解决方案——GAIA智能检测平台。该研究成果已获CVPR 2021会议收录（论文链接： 论文地址：https://arxiv.org/pdf/2106.…...

编程日记 2025/9/10 14:12:44

【数据分析实战】使用 Matplotlib 绘制折线图

1、简述在日常的数据分析、科研报告、项目可视化展示中，折线图是一种非常常见且直观的数据可视化方式。本文将带你快速上手 Matplotlib，并通过几个实际例子掌握折线图的绘制方法。 Matplotlib 是 Python 中最常用的数据可视化库之一，它能够…...

编程日记 2025/9/9 15:21:52

[原创](现代Delphi 12指南): 设置、运行和调试你的第一个macOS应用程序.

[作者] 常用网名: 猪头三出生日期: 1981.XX.XX 企鹅交流: 643439947 个人网站: 80x86汇编小站编程生涯: 2001年~至今[共24年] 职业生涯: 22年开发语言: C/C、80x86ASM、Object Pascal、Objective-C、C#、R、Python、PHP、Perl、开发工具: Visual Studio、Delphi、XCode、C …...

编程日记 2025/9/6 21:41:46

第一个Qt开发的OpenCV程序

OpenCV计算机视觉开发实践：基于Qt C - 商品搜索 - 京东下载安装Qt：https://download.qt.io/archive/qt/5.14/5.14.2/qt-opensource-windows-x86-5.14.2.exe 下载安装OpenCV：https://opencv.org/releases/ 下载安装CMake：Downl…...

编程日记 2025/9/12 16:17:31

APCC：CloudberryDB和Greenplum数据库的管理利器

在大数据时代，企业数据量激增，数据库的运维复杂度与日俱增。如何高效管理数据库集群、快速定位问题并保障系统稳定性，成为企业IT团队的核心挑战。Analytical Processing Central Console（APCC） 应运而生——这是一款专…...

编程日记 2025/9/14 3:05:12

3D打印革新制造范式：CASAIM 3D打印解决方案

在传统制造面临定制化需求激增与供应链效率瓶颈的双重挑战下，3D打印技术正以颠覆性姿态重塑产业格局。CASAIM深耕工业级3D打印领域十余年，以材料科学、工艺控制与数字化设计的深度融合，为航空航天、汽车制造、医疗器械等高精尖行业提供从原型…...

编程日记 2025/9/12 8:03:54

记得return 0 输入输出关闭同步流肯定会记得但是要记得define endl \n 更重要 dfs和string传参的注意题目链接 #include<bits/stdc.h> using namespace std;//#define int long long using ll long long; using ar2 array<int,2>; using ar3 array<i…...

编程日记 2025/9/11 3:24:55

安宝特案例 | Fundació Puigvert 医院应用AR技术开创尿石症治疗新纪元

案例介绍在医疗科技不断进步的今天，Fundaci Puigvert 医院迈出了重要一步，成功应用AR技术进行了全球首例同时使用两台内窥镜的ECIRS手术（内镜肾内联合手术），由Esteban Emiliani M.D. PhD F.E.B.U 博士主刀。这标志着…...

编程日记 2025/9/8 3:59:56

LangGraph 架构详解

核心架构组件 LangGraph 的架构建立在一个灵活的基于图的系统上，使开发者能够定义和执行复杂的工作流。以下是主要架构组件： 1. 状态管理系统 LangGraph 的核心是其强大的状态管理系统，它允许应用程序在整个执行过程中维护一致的状态&…...

编程日记 2025/9/7 18:47:21

项目学习总结001

1. 策略模式和工厂模式 https://mp.weixin.qq.com/s/RG-h7r69JyKUlBZylJJIFQ 在软件开发中也常常遇到类似的情况，实现某一个功能有多个途径，此时可以使用一种设计模式来使得系统可以灵活地选择解决途径，也能够方便地增加新的解决途径。这就是…...

编程日记 2025/9/14 1:30:53

TGRS 2024 | 基于光谱相关的高光谱图像超分辨率融合网络

10.1109/TGRS.2024.3423422 研究背景及以往方法存在的问题高光谱图像超分辨率（HSI-SR）旨在通过融合低空间分辨率 HSI 与高空间分辨率 MSI，提升 HSI 的空间分辨率。现有方法在模态差异处理、波段相关性利用、细节保留等方面存在不足&#x…...

编程日记 2025/9/10 11:41:15

小张的工厂进化史——工厂模式

小张的工厂进化史——工厂模式一、简单工厂模式：全能生产线二、工厂方法模式：分品牌代工三、抽象工厂模式：生态产品族四、三种模式核心对比表五、结合Spring实现简单工厂（实践） 小张从华强北起家，最初只有…...

编程日记 2025/9/13 19:00:53

jupyter notebook 无法启动- markupsafe导致

一、运行jupyter notebook和Spyder报错：(已安装了Anaconda，以前可打开) 1.背景：为了部署机器学习模型，按教程直接安装了flask 和markupsafe，导致jupyter notebook，Spyder 打不开。 pip install flas…...

编程日记 2025/9/9 1:05:50

GPT - GPT（Generative Pre-trained Transformer）模型框架

本节代码主要为实现了一个简化版的 GPT（Generative Pre-trained Transformer）模型。GPT 是一种基于 Transformer 架构的语言生成模型，主要用于生成自然语言文本。 1. 模型结构初始化部分 class GPT(nn.Module):def __init__(self, vocab…...

编程日记 2025/9/6 18:11:37

数据中台、BI业务访谈（三）：如何选择合适的访谈对象

大家在日常中有没有遇到这种情况，感觉所有的事情都准备的很充分了，反复的演练，结果一上去就发现事情完全没有按照自己预想的来。智者千虑，必有一失。满满自信的去，结果是铩羽归来。这种情况很正常，就跟打…...

编程日记 2025/8/17 19:30:17

计算机网络-TCP可靠传输机制

计算机网络-TCP可靠传输机制 3. TCP可靠传输机制3.1 序列号与确认号机制3.1.1 序列号与确认号的基本概念3.1.2 序列号与确认号的工作原理3.1.3 序列号与确认号在Linux内核中的实现TCP控制块中的序列号和确认号字段序列号的初始化发送数据时的序列号处理接收数据时的确认号处理 …...

编程日记 2025/9/14 3:10:44

计算机网络- 传输层安全性

传输层安全性 7. 传输层安全性7.1 传输层安全基础7.1.1 安全需求机密性（Confidentiality）完整性（Integrity）真实性（Authenticity）不可否认性（Non-repudiation） 7.1.2 常见安全威胁窃…...

编程日记 2025/9/10 14:12:14

【C++取经之路】lambda和bind

目录引言 lambda语法 lambda捕获列表解析 1）值捕获 2）引用捕获 3）隐式捕获 lambda的工作原理 lambda进阶用法泛型lambda 立即调用 lambda 与 function bind语法 bind的调用逻辑 bind核心用途绑定参数调整参数顺序 bind的…...

编程日记 2025/9/11 3:53:35

AF3 ProteinDataset类的初始化方法解读

AlphaFold3 protein_dataset模块 ProteinDataset 类主要负责从结构化的蛋白质数据中构建一个可供模型训练/推理使用的数据集，ProteinDataset 类的 __init__ 方法用于初始化一个蛋白质数据集对象。源代码： def __init__(self,dataset_folder,features_folder="./data/t…...

编程日记 2025/9/12 3:48:48

博客园账户注册全流程指南（附常见问题）

博客园账户注册全流程指南（附常见问题） 引言博客园作为国内老牌技术社区，是程序员们分享知识、交流技术的圣地。本文将手把手教你完成从注册到开通博客的全流程，附常见问题解答，助你轻松开启技术博客之旅。一、注…...

编程日记 2025/9/13 7:15:19

算法复习笔记

算法复习最大公约数枚举abc反序数模拟xxx定律打印数字菱形今年的第几天？vector完数VS盈数剩下的树排序和查找顺序查找二分查找找位置字符串统计单词浮点数加法线性数据结构队列约瑟夫问题（队列）计算表达式（栈） 递…...

编程日记 2025/9/9 4:11:15

spring boot 引入fastjson，com.alibaba.fastjson不存在（Springboot-测试项目）

spring boot 引入fastjson，com.alibaba.fastjson不存在（Springboot-测试项目） 先解决最初的的包不找到问题，适用所有包找不到跟进。 <mirrors><!-- mirror| Specifies a repository mirror site to use instead of a g…...

编程日记 2025/9/8 15:50:27

新闻推荐系统(springboot+vue+mysql)含万字文档+运行说明文档

新闻推荐系统(springbootvuemysql)含万字文档运行说明文档该系统是一个新闻推荐系统，分为管理员和用户两个角色。管理员模块包括个人中心、用户管理、排行榜管理、新闻管理、我的收藏管理和系统管理等功能。管理员可以通过这些功能进行用户信息管理、查看和编辑用…...

编程日记 2025/9/13 6:34:14

UE4 踩坑记录

1、Using git status to determine working set for adaptive non-unity build 我删除了一个没用的资源，结果就报这个错，原因就是这条命令导致的， 如果这个项目是git项目， ue编译时会优先通过 git status检查哪些文件被修改&#…...

编程日记 2025/9/12 7:16:21

【解决方案】vscode 不小心打开了列选择模式，选择时只能选中同一列的数据。

vscode 不小心打开了列选择模式，选择时只能选中同一列的数据。解决方案： 1.通过命令面板关闭： 按下 Ctrl Shift P（Windows/Linux）或 Cmd Shift P（macOS），输入切换列选择模式…...

编程日记 2025/9/10 3:45:20

国标GB28181视频平台EasyCVR如何搭建汽车修理厂远程视频网络监控方案

一、背景分析近年我国汽车保有量持续攀升，与之相伴的汽车保养维修需求也逐渐提高。随着社会经济的发展，消费者对汽车维修服务质量的要求越来越高，这使得汽车维修店的安全防范与人员管理问题面临着巨大挑战。多数汽车维修店分布分散&#…...

编程日记 2025/9/10 6:49:20

【Go】windows下的Go安装与配置，并运行第一个Go程序

【Go】windows下的Go安装与配置，并运行第一个Go程序安装环境：windows10 64位安装版本：go1.16 windows/amd64 一、安装配置步骤 1.到官方网址下载安装包 https://golang.google.cn/dl/ 默认情况下 .msi 文件会安装在 c:\Go 目录下。可自行配…...

编程日记 2025/9/13 6:34:01

Linux 线程：从零构建多线程应用：系统化解析线程API与底层设计逻辑

线程线程的概述在之前，我们常把进程定义为程序执行的实例，实际不然，进程实际上只是维护应用程序的各种资源，并不执行什么。真正执行具体任务的是线程。那为什么之前直接执行a.out的时候，没有这种感受呢&#xf…...

编程日记 2025/9/8 21:00:58

榕壹云无人共享系统：基于SpringBoot+MySQL+UniApp的物联网共享解决方案

无人共享经济下的技术革新随着无人值守经济模式的快速发展，传统共享设备面临管理成本高、效率低下等问题。榕壹云无人共享系统依托SpringBoot+MySQL+UniApp技术栈，结合物联网与移动互联网技术，为商家提供低成本、高可用的无人化运营解决方案。本文将详细解析该系统的技术架…...

编程日记 2025/9/7 12:03:02

技术书籍推荐(002):电子书免费下载

20. 利用Python进行数据分析免费电子书 PDF 下载书籍简介： 本书聚焦于使用Python进行数据处理和分析。详细介绍了Python中用于数据分析的重要库，如NumPy（提供高效的数值计算功能，包括数组操作、数学函数等）、panda…...

编程日记 2025/9/11 18:04:10

安全序列(DP)

#include <bits/stdc.h> using namespace std; const int MOD1e97; const int N1e65; int f[N]; int main() {int n,k;cin>>n>>k;f[0]1;for(int i1;i<n;i){f[i]f[i-1]; // 不放桶：延续前一位的所有方案if(i-k-1>0){f[i](f[i]f[i-k…...

编程日记 2025/9/12 7:58:42

数据可视化 —— 堆形图应用（大全）

一、案例一：温度堆积图 # 导入 matplotlib 库中的 pyplot 模块，这个模块提供了类似于 MATLAB 的绘图接口， # 方便我们创建各种类型的可视化图表，比如折线图、柱状图、散点图等 import matplotlib.pyplot as plt # 导入 numpy 库&…...

编程日记 2025/9/3 12:27:16

利用 pyecharts 实现地图的数据可视化——第七次人口普查数据的2d、3d展示（关键词：2d 、3d 、map、 geo、涟漪点）

参考文档：链接: link_pyecharts 官方文档 1、map() 传入省份全称，date_pair 是列表套列表 [ [ ],[ ] … ] 2、geo() 传入省份简称，date_pair 是列表套元组 [ ( ),( ) … ] 1、准备数据 population_data：简称经纬度 population_da…...

编程日记 2025/9/8 1:29:09

字节跳动开源 LangManus：不止是 Manus 平替，更是下一代 AI 自动化引擎

当 “AI 自动化” 成为科技领域最炙手可热的关键词，我们仿佛置身于一场激动人心的变革前夜。各行各业都在翘首以盼，期待 AI 技术能够真正解放生产力，将人类从繁琐重复的工作中解脱出来。在这个充满无限可能的时代，字节跳动悄然发布…...

编程日记 2025/9/8 10:59:40

第十四届蓝桥杯大赛软件赛省赛C/C++ 大学 A 组真题

文章目录 1 幸运数题目描述：答案：4430091 代码： 2 有奖问答题目描述：重点：答案：8335366 代码： 3 平方差题目描述：思路：数学找规律代码： 4 更小的数题目描述&a…...

编程日记 2025/8/17 19:30:31

springboot+tabula解析pdf中的表格数据

场景在日常业务需求中，往往会遇到解析pdf数据获取文本的需求，常见的做法是使用 pdfbox 来做，但是它只适合做一些简单的段落文本解析，无法处理表格这种复杂类型，因为单元格中的文本有换行的情况，无法对应到…...

编程日记 2025/8/27 1:04:29

静态链接part1

比较多这一部分，包含了编译和链接，书还没看完就先记录一下其中编译的一部分编译 gcc编译分为预处理、编译、汇编、链接四个步骤预处理也称预编译，主要处理的是源代码文件中以“#”开始的预编译指令，这里简单讲一下规则&…...

编程日记 2025/9/4 0:58:44

golang通过STMP协议发送邮件功能详细操作

一.简介在 Go 语言中接入 IMAP 和 SMTP 服务来进行邮件的发送和接收操作,可以通过使用一些现有的第三方库来简化操作,常见的库有 go-imap 和 gomail，它们可以帮助我们连接和操作 IMAP 邮箱（读取邮件）以及通过 SMTP 发送邮件二.实现 1. IMA…...

编程日记 2025/9/3 10:50:11

需求背景

方案定义

预加载实现

相关文章：