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

前端 CSS 经典:在 Vue3 中使用渐进式图片

1. 什么是渐进式图片

当我们网站会加载很多图片的时候,有些图片尺寸很大,加载就会很慢,会导致页面长时间陷入白屏状态,用户体验很不好。所以可以使用渐进式图片,先给用户展示模糊图,这些图尺寸小,加载快,可以快速显现出来。然后再逐步传输大图,大图传输完成之后替换模糊图。这就是渐进式图片。 

2. 实现方式

有两种方案,一种靠设计师,一种靠自己

2.1 靠设计师

直接让设计师给你渐进式图片,因为 jpg 图片支持多帧,设计师可以在第一帧放一个模糊图,在第二帧放高清图。在传输的时候,浏览器首先会收到模糊图并展示,然后再慢慢传输高清图,一步一步去替换模糊图。但是这有两个缺陷,一个是浏览器兼容,还有一个是设计师不干或者不会。

2.2 靠自己

我们构建一个 ProgressiveImg.vue 组件,实现渐进式图片。实现思路是传入两个图片,一张模糊,一张高清,高清图片加载完成后触发替换。

ProgressiveImg.vue 组件构建

<script setup>defineProps({placeholder: String,origin: String,});const handleLoaded = (e) => {e.target.parentElement.classList.add("loaded");};
</script><template><div class="progressive"><img class="img placeholder" :src="placeholder" /><img @load="handleLoaded" class="img origin" :src="origin" /></div>
</template><style scoped>.progressive {width: 100%;height: 100%;position: relative;}.img {width: 100%;height: 100%;display: block;object-fit: cover;transition: all 0.6s;}.origin {opacity: 0;position: absolute;left: 0;top: 0;filter: blur(10px);}.loaded .origin {opacity: 1;filter: blur(0);}
</style>

使用 ProgressiveImg.vue 组件

<script setup>import ProgressiveImg from "./components/ProgressiveImg.vue";import small from "./assets/_bg.jpg";import big from "./assets/bg.jpg";
</script><template><div class="contain"><ProgressiveImg :placeholder="small" :origin="big" /></div>
</template><style>body {margin: 0;padding: 0;}.contain {width: 100vw;height: 100vh;}
</style>

相关文章:

前端 CSS 经典:在 Vue3 中使用渐进式图片

1. 什么是渐进式图片 当我们网站会加载很多图片的时候&#xff0c;有些图片尺寸很大&#xff0c;加载就会很慢&#xff0c;会导致页面长时间陷入白屏状态&#xff0c;用户体验很不好。所以可以使用渐进式图片&#xff0c;先给用户展示模糊图&#xff0c;这些图尺寸小&#xff…...

毕业了校园卡怎么改套餐?

毕业了校园卡怎么改套餐&#xff1f; 毕业生校园卡99元套餐变更8元保号套餐教程 学弟学妹们恭喜毕业呀&#x1f393; 校园卡绑定了好多东西注销不掉又不想交高额月租的看过来。 今天一招教你更改校园卡套餐。 中国移动/电信/联通App 打开App&#xff0c;在首页右上角点击人工…...

每一个男人都曾有一个机器人的梦想

每一个男人都曾有一个机器人的梦想 我也有 每一个男人都曾有一个机器人的梦想。对于我来说&#xff0c;这个梦想始于童年时代&#xff0c;那时变形金刚风靡一时&#xff0c;几乎所有80后的孩子都为之疯狂。我是80后中的一员&#xff0c;那时候的科技还远没有如今这般发达&#…...

中望CAD 2025 (ZW3D2025) 简体中文修改版

名称&#xff1a;中望CAD 2025 (ZW3D2025) 简体中文修改版 描述&#xff1a;一款三维CAD设计工具&#xff0c;运行破解补丁ZW3D2025-2024-Patch执行修补。 链接&#xff1a;夸克网盘分享 &#x1f4c1; 大小&#xff1a;3.2GB &#x1f3f7; 标签&#xff1a;#PC软件 #CAD #设…...

CAN 通讯

波特率 波特率&#xff08;Baud Rate&#xff09;是指数据通信中每秒传输的符号&#xff08;或脉冲&#xff09;的数量。在CAN&#xff08;Controller Area Network&#xff09;通信中&#xff0c;波特率通常表示每秒传输的位数&#xff08;bit per second&#xff0c;bps&…...

第零篇——数学到底应该怎么学?

目录 一、背景介绍二、思路&方案三、过程1.思维导图2.文章中经典的句子理解3.学习之后对于投资市场的理解4.通过这篇文章结合我知道的东西我能想到什么&#xff1f; 四、总结五、升华 一、背景介绍 宏观讲解数学定位&#xff0c;数学学习方式方法&#xff0c;再次详细学习…...

Spring Boot顶层接口实现类注入项目的方法

1、背景 在项目中&#xff0c;我们通常会具有同一特性的业务类定义一个顶层接口&#xff0c;让业务类实现这个接口&#xff0c;通过接口规范来管理这些类。我们将这些实现接口的业务类交托给Spring容器接口后&#xff0c;有时候需要根据业务类型来选择动态选择对应的业务类阿里…...

JDBC介绍-AI问答(通义千问)

一、JDBC介绍 介绍JDBC JDBC&#xff08;Java Database Connectivity&#xff09;是Java中用于连接和操作关系型数据库的标准API&#xff08;应用程序编程接口&#xff09;。它是由Sun Microsystems&#xff08;现在是Oracle的一部分&#xff09;开发&#xff0c;并随Java Deve…...

Spring AI探索

Spring AI概述 该Spring AI项目旨在简化包含人工智能功能的应用程序的开发&#xff0c;避免不必要的复杂性。 该项目从著名的 Python 项目&#xff08;例如 LangChain 和 LlamaIndex&#xff09;中汲取灵感&#xff0c;但 Spring AI 并非这些项目的直接移植。该项目的成立基于…...

【代码随想录算法训练Day39】LeetCode 62.不同路径、LeetCode 63.不同路径II

Day39 动态规划第二天 LeetCode 62.不同路径 二维dp数组的含义&#xff1a;走到位置为(i,j)的格子的走法为dp[i][j]种。 递推公式&#xff1a;dp[i][j]dp[i-1][j]dp[i][j-1]。 初始化&#xff1a;dp[i][0]和dp[0][j]都赋值为1. 递归顺序&#xff1a;从左往右&#xff0c;从上…...

浙大版PTA Python程序设计 题目与知识点整理(综合版)

目录 第一章 一、高级语言程序的执行方式 二、变量赋值与内存地址 三、字符编码 3.1 Unicode 3.2 ASCII&#xff08;American Standard Code for Information Interchange&#xff09; 四、编程语言分类按照编程范式分类 4.1 面向过程语言 4.2 面向对象语言 五、原码…...

HTML表单深度解析:构建互动的网页界面

表单是HTML中用于收集用户输入信息的重要元素&#xff0c;是网页与用户交互的关键组件。以下是一个典型的HTML表单示例&#xff0c;我们将会详细解析其中的各个元素及属性含义。 <form action"https://xx.xxx.xx/search" target"_self" method"ge…...

git 分支管理规范

分支命名 master 分支 master 为主分支&#xff0c;也是用于部署生产环境的分支&#xff0c;需要确保master分支稳定性。master 分支一般由 release 以及 hotfix 分支合并&#xff0c;任何时间都不能直接修改代码。 develop 分支 develop 为开发环境分支&#xff0c;始终保持…...

Spring Cloud Gateway 详解:构建高效的API网关解决方案

Spring Cloud Gateway 详解&#xff1a;构建高效的API网关解决方案 Spring Cloud Gateway 是 Spring Cloud 生态系统中用于构建 API 网关的核心组件。它基于 Spring WebFlux 构建&#xff0c;旨在提供简单且有效的方式来路由和增强 API 请求。以下是 Spring Cloud Gateway 的详…...

基于Quartus Prime18.1的安装与FPGA的基础仿真教程

Quartus是一种美国科技公司Intel&#xff08;英特尔&#xff09;公司开发的FPGA&#xff08;现场可编辑门阵列&#xff09;设计编译软件&#xff0c;用作设计、仿真、综合和布局、支持多种编程语言&#xff0c;包括VHDL、Verilog等&#xff0c;并具有丰富的功能和工具库&#x…...

AJAX 和 XML:现代 Web 开发的关键技术

AJAX 和 XML:现代 Web 开发的关键技术 引言 在当今的 Web 开发领域,AJAX 和 XML 是两项至关重要的技术。AJAX(Asynchronous JavaScript and XML)允许网页在不重新加载整个页面的情况下,与服务器交换数据和更新部分网页内容。而 XML(eXtensible Markup Language)则是一…...

vue实现图片预览

在 Vue 中实现图片预览功能&#xff0c;通常涉及监听文件输入的变化&#xff0c;并在用户选择文件后&#xff0c;使用 FileReader API 来读取文件内容&#xff0c;然后显示这个内容作为图片的预览。以下是一个简单的 Vue 组件示例&#xff0c;它实现了图片预览功能&#xff1a;…...

C语言入门系列:流程控制

一&#xff0c;C代码执行顺序 默认情况下&#xff0c;C语言程序从main()函数开始执行&#xff0c;随后按源代码中语句出现的顺序逐一执行。 这意味着&#xff0c;如果不考虑任何控制结构&#xff0c;程序会自上而下&#xff0c;逐行执行每条语句&#xff0c;直到遇到函数调用…...

【深度学习】NLP,Transformer讲解,代码实战

文章目录 1. 前言2. Transformer结构训练过程1. 输入嵌入和位置编码2. 编码器层2.1 单头的注意力机制(便于理解)2.2 多头的注意力机制(Transformer真实使用的)2.3 残差连接和层归一化2.4 前馈神经网络&#xff08;FFN&#xff09;2.5 残差连接和层归一化2.6 总结 3. 解码器层 推…...

ES6 .entries用法

.entries() 返回数组的可迭代对象itarator,可以通过for of 来遍历数组或对象的值。但是它们的写法不一样。 数组用法 obj [apple,bananer,orange] for(let [i,v] of obj.entries()){console.log(i)console.log(v) } //输出 // 0 // apple // 1 // bananer // 2 //orange对象…...

UE5 学习系列(二)用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

今日学习:Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

VisualXML全新升级 | 新增数据库编辑功能

VisualXML是一个功能强大的网络总线设计工具&#xff0c;专注于简化汽车电子系统中复杂的网络数据设计操作。它支持多种主流总线网络格式的数据编辑&#xff08;如DBC、LDF、ARXML、HEX等&#xff09;&#xff0c;并能够基于Excel表格的方式生成和转换多种数据库文件。由此&…...

拟合问题处理

在机器学习中&#xff0c;核心任务通常围绕模型训练和性能提升展开&#xff0c;但你提到的 “优化训练数据解决过拟合” 和 “提升泛化性能解决欠拟合” 需要结合更准确的概念进行梳理。以下是对机器学习核心任务的系统复习和修正&#xff1a; 一、机器学习的核心任务框架 机…...

FOPLP vs CoWoS

以下是 FOPLP&#xff08;Fan-out panel-level packaging 扇出型面板级封装&#xff09;与 CoWoS&#xff08;Chip on Wafer on Substrate&#xff09;两种先进封装技术的详细对比分析&#xff0c;涵盖技术原理、性能、成本、应用场景及市场趋势等维度&#xff1a; 一、技术原…...

表单设计器拖拽对象时添加属性

背景&#xff1a;因为项目需要。自写设计器。遇到的坑在此记录 使用的拖拽组件时vuedraggable。下面放上局部示例截图。 坑1。draggable标签在拖拽时可以获取到被拖拽的对象属性定义 要使用 :clone, 而不是clone。我想应该是因为draggable标签比较特。另外在使用**:clone时要将…...