页面体验提升小技巧—渐进式图片
前端性能方面有许多可优化的点，而这些优化带来的就是用户体验的提升。今天我们要聊的东西并不能给性能带来提升，但却能在一定程度上提升用户的体验。
参考博客
场景：在访问页面的时候如果图片较大或者网速慢的情况我们会看到图片加载起来是有一个明显过程的，就是从上到下逐行呈现出来，这给用户的信号就是再等等图片还在加载中，并且图片没有加载出来的部分呈现一片空白，不利于体验，下面就看看渐进式图片怎么缓解这一情况
认识渐进式图片
渐进式图片其实是一种JPEG格式的图片，和普通的JPEG图片的区别如下：
普通图片渲染时，数据将按照存储时的顺序从上到下逐行扫描被显示出来的，直到所有的数据都被读取完毕，就完成了整张图片的显示。
渐进式图片渲染过程中，会先显示整个图片的模糊轮廓，随着扫描次数的增加，图片变得越来越清晰。这种格式的主要优点是在网络较慢的情况下，可以看到图片的轮廓知道正在加载的图片大概是什么。
口说无凭，看看效果
- 生成两张相同的图片，均为JPEG格式
1、普通图片生成
2、渐进式图片生成（直接ps保存为JPEG格式，勾选连续）
- 部署到服务器查看效果
效果描述：从上面可以看到，两张图片的大小是差不多的，渐进式图片一开始呈现的效果为好像是一下子就完全加载出来了，只是看起来有点模糊。而普通图片是逐行扫描加载，已渲染的部分清晰可见。
- 最终效果
总结
从直观上来看好像渐进式图片要加载的快一点，这就是渐进式图片能够达到的体验提升效果。
更多专业前端知识，请上 【猿2048】www.mk2048.com
页面体验提升小技巧—渐进式图片相关推荐
- 【PIL处理图片】小技巧之图片透明渐变处理
[PIL处理图片]系列文章目录 小技巧之图片透明渐变处理 小技巧之画虚线.加粗字体.自动分行(符号处理) 小技巧之圆角边框处理 图片透明渐变处理 想要图片有一个从透明到不透明的过渡,可以在图片上加一层 ...
- win11玩游戏延迟_win11系统玩游戏卡顿性能提升小技巧
win11系统更新的许多新功能,也招来了不少的游戏玩家,许多高玩选手为了更快的适应及获得更好的体验都升级了win11,不过不少升级了Win11系统的朋友发现在玩游戏的时候比Win10系统要慢,这其中基 ...
- 网站单页面排名提升的技巧有哪些？
网站优化的好坏决定着网站是否能给企业带来更多流量以及转化,网站排名的提升也会更利于网站获利.网站页面排名的提升对于网站整体的优化也是有一定的帮助,网站SEO优化提升页面排名也需要掌握一定的技巧方法,那 ...
- 语言课程设计超市售货_自闭症儿童家庭干预10个语言能力提升小技巧
口舌操 目的:锻炼孩子口舌运动的力量和灵活性,为正确的口型.舌位打好基础. 准备:准备节奏分明的音乐. 步骤: 第一节:张大嘴按照音乐节拍,一张一合; 第二节:伸舌头按照音乐节拍,一伸一缩; 第三节: ...
- ios15.4系统更新导致设备续航问题苹果官方回复,附iPhone续航提升小技巧
最近,苹果发布了iOS 15.4正式版,带来了一系列的新功能.不过,却有不少用户反映,该版本存在耗电过多的问题. 部分用户反馈称,在OTA升级后经历了糟糕的电池续航,iPhone 11在24小时内消耗 ...
- Python趣味编程小技巧，图片转炫酷字符画，一看就是高手
hello大家好,今天我又发现了个有趣的小玩意.我是专写有趣小玩意的老师. 老规矩,先上效果图 今天做这个图片转字符画是用到了pil库.这是一个专门用来处理图片的python库.自己直接用pip安装下 ...
- 每日一个小技巧：图片去雾怎么去除？这3个软件推荐给你
在工作和生活中,因为天气.拍摄等因素的影响,我们经常会遇到照片模糊的情况.这不仅影响了照片的质量,也会导致大家观感不佳.那遇到这种情况该怎么办呢?其实你不必担心,我们可以借助一些软件对图片进行去雾操作 ...
- java 新窗口跳转页面_Java web开发中页面跳转小技巧——跳转后新页面在新窗口打开...
最近学习Java web,在学习过程中想实现一个需求,就是在jsp页面跳转的时候,希望跳转后的新页面在新窗口中打开, 而不是覆盖原来的页面,这个需求使我困惑了好长时间,后来通过大海捞针似的在网上寻找方 ...
- PS实用小技巧--修改图片上的文字
用PS修改图片上的文字 打开一张照片,点击矩形框选工具(右键可以显示所有工具),左键拉动区域选中所要选取的数字 2.ctrl+j将该选中的区域复制出一个图层 使用吸管工具1吸取所需要的颜色2,吸取后颜 ...
最新文章
- wifidog接口文档(转)
- jsp 学习 第3步 - el 自定义方法 tld 说明
- java闭包矩阵_深刻理解Java闭包概念
- 财务大数据比赛有python吗-Python大数据与机器学习之NumPy初体验
- 《论语》读后颜渊第十二主要大意
- 001. Ansible简介
- jQuery过滤选择器:first和:first-child的区别，CSS伪类:first-child
- 知乎App有哪些非常“贴心”的UI设计
- XJOI 3281 A * B Problem again 题解
- 线性模型第1讲：最小二乘法
- 强强联手，AliOS和ACRN为物联网领域带来全新解决方案
- 【Registration of 3D Point Clouds with Low Overlap】
- lisp天正图元位置修改_关于图元改层的，请求大佬帮助 - AutoLISP/Visual LISP 编程技术 - CAD论坛 - 明经CAD社区 - Powered by Discuz!...
- 买卖股票的最佳时机(第一版)
- 阿里云国际站怎么注册？
- 第三届“拳头奖”投票进行时 Devstore志在必得
- 【用pandas_alive几行代码绘制竞赛动图】10.新南威尔士州 COVID 可视化（测试代码+数据集+绘图参数解析）
- 使用 Screen 创建并管理多个 shell
- Python性能分析入门——cProfile、可视化、逐行分析、内存分析
- linux中的文件夹压缩文件,linux将文件拷贝到目录下Linux下文件的压缩与打包详解...