渐进式图片解决前端在页面中使用大图,图片体积过大导致页面出现白屏现象

1、演示 

可以看到,图片还在拼命加载的时候, 页面上就已经有内容了

2、什么渐进式图片

图片一开始是模糊的,然后逐渐的开始变的清晰。如果页面上有一些大图,如果直接扔给浏览器的话那么图片的传输时间就会比较长,用户就会长时间陷入白屏。那么可以先展示一个小图,因为小图的尺寸小,所以说它能够快速的显现出来,然后呢再逐步的给它传输大图,大图传输完成之后再显示大图,这就是渐进式图片

3、实现方法

3.1 啥也不用做

直接让设计师给你的图片就是渐进式图片就行,渐进式图片实现原理,jpg图片实际上是可以支持多帧的平时拍照或者是截图,一般都是单帧也就是1帧,但实际上是可以支持多帧的,我们只需要在第1帧里面放一个模糊的小图,第二帧的时候呢放一个高清的大图,那么在传输的时候首先收到的是1个小帧,这个很快就传输完了,接下来浏览器会自动处理先把他渲染出来,等一会再传输大帧的时候呢再一步一步去替换小帧,丰富里面模糊的细节,虽然添加了帧数,但是图片的大小不会有明显的变化,这根jpg里面的内部数据格式相关,这里就不说了

这种方法的缺点就是可能有些老浏览器不兼容,可能还有就是设计师不给你做

3.2 代码实现

实现原理:在最开始的时候,大图是隐藏的,小图示显示的,等大图加载完成,显示大图,隐藏小图

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.bigImg {width: 100%;height: 100vh;}.smallImg {width: 100%;height: 100vh;}</style></head><body><img src="./big.png" alt="" class="bigImg" style="display: none" /><img src="./samll.png" alt="" class="smallImg" style="display: block" /></body><script>const bigImg = document.querySelector('.bigImg')const smallImg = document.querySelector('.smallImg')bigImg.addEventListener('load', function () {console.log('大图已加载完成,小图隐藏,大图展示')bigImg.style.display = 'block'smallImg.style.display = 'none'})</script>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/791646.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

软考高级架构师:校验码概念和例题

作者&#xff1a;明明如月学长&#xff0c; CSDN 博客专家&#xff0c;大厂高级 Java 工程师&#xff0c;《性能优化方法论》作者、《解锁大厂思维&#xff1a;剖析《阿里巴巴Java开发手册》》、《再学经典&#xff1a;《Effective Java》独家解析》专栏作者。 热门文章推荐&am…

【STM32】ST-LINK 下载时遇到的问题

如果出现“ST-Link USB communication error”ST-Link USB通信错误&#xff0c;则需要启动STM32 ST-LINK Utility&#xff0c;点击【ST-LINK】->【Firmaware】更新固件&#xff0c;然后打开Kei&#xff0c;点击魔术棒->->Debug->Settings&#xff0c;开到出现类似“…

电磁兼容故障整改-静电放电抗扰度不合格

电磁兼容故障整改-静电放电抗扰度不合格 ESD干扰机理不合格的主要原因 静电放电对设备的影响有下面几种安装滤波器也对静电放电有所帮助通过良好的搭接与接地防止ESD ESD干扰机理 ESD干扰电流其实是一种共模电流&#xff0c;因为ESD电压总是以参考接地板为基准的。如空击穿放电…

JavaScript变量作用域与解构赋值

在JavaScript中&#xff0c;用var申明的变量实际上是有作用域的。如果一个变量在函数体内部申明&#xff0c;则该变量的作用域为整个函数体&#xff0c;在函数体外不可引用该变量&#xff1a; ‘use strict’; function foo() { var x 1; x x 1; } x x 2; // ReferenceErr…

基于chatGLM在llama index上建立Text2SQL

基于chatGLM在llama index上建立Text2SQL 文中使用了chatglm的llm和embedding modle,利用的智谱的免费token Text2SQL Text2SQL其实就是从文本到SQL,也是NLP中的一种实践,这可以降低用户和数据库交互的门槛,无需懂SQL就可以拿到数据库数据。Text2SQL实现了从自然语言到SQL…

什么是中间人攻击?

中间人攻击&#xff08;Man-in-the-Middle Attack&#xff0c;简称MITM攻击&#xff09;是一种常见的网络安全威胁&#xff0c;攻击者在通信双方之间秘密拦截和转发消息&#xff0c;使双方误以为他们正在直接通信。这种攻击方式可以让攻击者监听、篡改通信内容&#xff0c;甚至…

Vue Mixin混入如何使用?三种方式【plugin插件、全局、局部】

插件写法&#xff1a; 1. 创建一个commonMixin.js文件 2. 文件导出对象 export default {install (Vue) {Vue.mixin({created() {console.log(commonMixin)},methods: {},computed: {}})} }3. 在main.js中引入 import commonMixin from ./common/commonMixin.js Vue.use(commo…

从redux的基本概念渐进式理解redux/toolkit的用法

概念 Redux toolkit是帮助提高redux开发效率的一个库 React-redux 是将React和Redux toolkit绑定在一起的一个库 action 是一个对象,里面有一个type属性 action creator是一个函数,这个函数可以返回上面的action对象。 reducer 是一个函数,接受两个参数(initilastate, acti…

微软邮箱被锁住,该如何解除限制?

ChatGPT账号是微软邮箱注册的&#xff0c;我们在登陆微软邮箱时&#xff0c;http://www.outlook.com&#xff0c;不需要开魔法工具&#xff0c;直接就可以登陆&#xff0c;否则会出现安全验证&#xff0c;限制登陆。 那么如果账号被锁&#xff0c;我们该如何解除限制呢&#x…

mongoDB 优化(2)索引

执行计划 语法&#xff1a; db.collection_xxx_t.find({"param":"xxxxxxx"}).explain(executionStats) 感觉这篇文章写得很好&#xff0c;可以参考 MongoDB——索引&#xff08;单索引&#xff0c;复合索引&#xff0c;索引创建、使用&#xff09;_mongo …

【Python】JSON与jsonpath

JSON JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式&#xff0c;易于人阅读和编写。 使用 JSON 函数需要导入 json 库&#xff1a;import json json.dumps json.dumps 用于将 Python 对象编码成 JSON 字符串。 语法 json.dumps(obj, skipkeysFalse, ensu…

asf是什么格式的文件?用手机怎么打开?

由于手机操作系统和硬件的限制&#xff0c;大部分手机并不直接支持asf文件的播放。因此&#xff0c;如果你想在手机上打开asf文件&#xff0c;你可能需要先将文件转换为手机支持的格式&#xff0c;如MP4。可以通过使用一些视频转换软件来实现&#xff0c;比如野葱视频转换器。 …

树状数组学习笔记

树状数组 拜读了大佬的讲解博文&#xff08;树状数组(详细分析应用)&#xff0c;看不懂打死我!&#xff09;&#xff0c;写一篇Python版的笔记巩固消化&#xff0c;附带蓝桥杯历年真题作为例题演示 一、作用 用于快速读取列表中 某个区间内所有元素的和 实现单点修改&#xff…

【VSCode】修改插件地址

不想放在原始C盘下面C:\Users\{用户}\.vscode\extensions为了后续存储空间考虑&#xff0c;想通过添加环境变量创建名为VSCODE_EXTENSIONS的环境变量&#xff0c;内容指向vs Code扩展所在目录即可 直接配置环境变量&#xff0c;不要在有空格的文件夹下面 变量名称&#xff1a;…

jvm的垃圾回收策略

垃圾回收回收的是什么 对象 类元数据&#xff1a; 类的元数据包括类的结构信息、方法信息、字段信息等&#xff0c;它们存储在方法区&#xff08;Metaspace&#xff09;中。当一个类不再被引用时&#xff0c;垃圾回收器会卸载这个类&#xff0c;并释放其在方法区中占用的内存空…

TCP的十个重要的机制

注&#xff1a;TCP不是只有十个机制 TCP 可靠传输是tcp最为重要的核心&#xff08;初心&#xff09; 可靠传输&#xff0c;并不是发送方把数据能够100%的传输给接收方 而是退而求其次 让发送方发送出去数据之后&#xff0c;能够知道接收方是否收到数据。 一但发现对方没有…

[RK3566-Android11] 关于 a2dpsink -蓝牙支持接收播放/无PIN码连接

问题描述 1.蓝牙支持接收播放 2.蓝牙支持无PIN码连接&#xff08;不需要弹出pin配对码请求弹窗&#xff09; 3.蓝牙支持播放歌曲信息并应用层获取 解决方案&#xff1a; 1.a2dpsink-蓝牙需要支持接收播放补丁 1、device/rockchip/common/overlay/overlay/packages/apps/Blue…

CVE-2021-30517:Type confusion bug in LoadSuperIC

前言 这个漏洞是一个比较老的洞&#xff0c;之所以分析这个漏洞&#xff0c;只要是想再学习一下 ICs 相关的知识。并该漏洞的利用是利用与 String/Function 之间的混淆&#xff0c;比较有意思。 环境搭建 sudo apt install python git checkout 7d5e5f6c62c3f38acee12dc4114…

浅谈深度学习的学习方法

深度学习作为人工智能领域的一大热门技术&#xff0c;吸引了越来越多的开发者和研究者投身其中。然而&#xff0c;对于初学者来说&#xff0c;如何高效地入门深度学习并不是一件容易的事情。 一、基础知识准备 在开始学习深度学习之前&#xff0c;建议先掌握一些基础知识&…

vite.config.js

Vue3vite vite和webpack区别&#xff1f; 1.vite服务器启动速度比webpack快&#xff0c;由于vite启动的时候不需要打包&#xff0c;也就无需分析模块依赖、编译&#xff0c;所以启动速度非常快。当浏览器请求需要的模块时&#xff0c;再对模块进行编译&#xff0c;这种按需动态…