页面体验提升小技巧—渐进式图片

前端性能方面有许多可优化的点,而这些优化带来的就是用户体验的提升。今天我们要聊的东西并不能给性能带来提升,但却能在一定程度上提升用户的体验。

参考博客

    场景:在访问页面的时候如果图片较大或者网速慢的情况我们会看到图片加载起来是有一个明显过程的,就是从上到下逐行呈现出来,这给用户的信号就是再等等图片还在加载中,并且图片没有加载出来的部分呈现一片空白,不利于体验,下面就看看渐进式图片怎么缓解这一情况

认识渐进式图片

渐进式图片其实是一种JPEG格式的图片,和普通的JPEG图片的区别如下:

  • 普通图片渲染时,数据将按照存储时的顺序从上到下逐行扫描被显示出来的,直到所有的数据都被读取完毕,就完成了整张图片的显示。

  • 渐进式图片渲染过程中,会先显示整个图片的模糊轮廓,随着扫描次数的增加,图片变得越来越清晰。这种格式的主要优点是在网络较慢的情况下,可以看到图片的轮廓知道正在加载的图片大概是什么。

口说无凭,看看效果
  • 生成两张相同的图片,均为JPEG格式

1、普通图片生成

2、渐进式图片生成(直接ps保存为JPEG格式,勾选连续)

  • 部署到服务器查看效果

    效果描述:从上面可以看到,两张图片的大小是差不多的,渐进式图片一开始呈现的效果为好像是一下子就完全加载出来了,只是看起来有点模糊。而普通图片是逐行扫描加载,已渲染的部分清晰可见。

  • 最终效果

总结

    从直观上来看好像渐进式图片要加载的快一点,这就是渐进式图片能够达到的体验提升效果。


更多专业前端知识,请上 【猿2048】www.mk2048.com

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

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

相关文章

微信小程序搭配小白接口,自己没有服务器也能开发哦

这里将重点介绍,在自己没有服务器的情况下,如何在微信小程序里直接调用小白接口。 前提 假设你已经开通微信小程序,如果还没有,可前往微信公众平台开通:https://mp.weixin.qq.com 假设你已经开通小白接口&#xff0c…

怎么将自己做好的网站发布到互联网上呢?

如何将自己的网站上传到网站空间。 1.需要有一个上传网站的软件,在这里推荐大家使用 FTP全称是flashfxp这个软件,这个功能功能齐全而且操作简单。大家可以先去下载一下这个软 件 2. 打开FTP,界面如下 3.我们要点击链接按钮,然后FT…

[贝聊科技]网页端「应用跳转」技术实现演变

本文作者:Mr.Luo ,贝聊前端经理。本文同时发布于作者 个人博客 。 由于网页传播的便捷性,从网页向APP导流几乎是所有APP厂商都会采用的推广手段,具体来说就是在网页上提供一些触发点(例如按钮、链接)&#…

Linux服务器配置---安装vsftpd

安装vsftpd 大多数Linux系统都使用vsftpd,因此这里我们也安装vsftpd 1、安装vsftpd [rootlocalhost phpMyAdmin]# yum install -y vsftpd Loaded plugins: fastestmirror, refresh-packagekit, security Installed: vsftpd.i686 0:2.2.2-11.el6_4.1 …

mysql怎么制作柱状图_从数据库中取出最近三十天的数据并生成柱状图

在终端用cd 命令进入文件目录说明:此处例子我是拿项目中的一个例子讲解的。1、新建一个项目 :用终端输入:zf create project Airline 格式:zf create action project project-name 备注:这些格式可以在终端输入zf 查看…

关于ES6的Promise

JavaScript的异步处理 提到JavaScript的异步处理,也许很多人和我一样想到利用回调函数。 例如: firstAsync(function(data){//处理得到的 data 数据//....secondAsync(function(data2){//处理得到的 data2 数据//....thirdAsync(function(data3){//处…

[转]我是如何走进黑客世界的?

*本文原创作者:MyselfExplorer;翻译编辑:楼兰,本文属FreeBuf原创奖励计划,未经许可禁止转载 我想给你一把打开这扇门的钥匙,而你要做的便是静静的聆听接下来的故事。挖掘 0day 一般需要掌握fuzzing&#xf…

Socket.io 深入理解

最近在做项目优化工作时,用到了Socket.io , Socket.io 文档比较少, 结合官网介绍以及自己在项目开发中的摸索,总结如下内容; Socket.io将Websocket和轮询 (Polling)机制以及其它的实时通信方式封装成了通用…

python填表_小Python填表得到d

我正在尝试使用Scrapy从网站自动下载数据。在我要做的是:使用我的凭据登录网站通过在“RIC”行中写入代码并选择感兴趣的时段来选择我想要的数据单击“获取数据”后,将生成.csv文件,我可以从“下载/”url下载该文件,其中我的所有文…

我理解中的“大前端”/“大无线”

本文内容较长,大概需要15分钟时间阅读。 内容包含五部分:前言,NodeJS职能变化,ReactNative的大规模应用,专门的架构组职能,总结。主要是介绍我所在团队最近的一些变化和思考。 更多信息可以加入我的小密圈关…

Dirichlet分布

1.预备知识 Beta分布函数是一种定义在实数区间[0,1]的特殊函数,它是二项式分布的共轭分布;与Beta分布相同,Dirichlet分布也是定义在实数区间[0,1]的概率度量函数,Dirichlet分布是多项式分布的共轭分布,Dirichlet分布的…

布局定位

布局与定位 摆放元素 1,使用流 流实际上就是浏览器在页面上摆放HTML元素所用的方法。浏览器从HTML文件最上面开始,从上到下沿着元素流逐个显示所遇到的各个元素。 每个块元素会按它在HTML标记中出现的顺序放置在页面上。每个新的块元素会带来一个换行。并…

python语言精通_Python语言基础从入门到精通

1、python关键字False await else import passNone break except in raiseTrue class finally is returnand continue for lambda tryas def from nonlocal whileassert del global not withasync elif if or yield2、命令行参数williamdeMBP-2:~ william$ python -c "imp…

FreeNAS:创建 CIFS 共享(权限)

第一部分:新建账户与指定数据集权限 简单起见,本教程主要介绍带基本身份验证的 CIFS 共享,即只有输入正确的用户名和密码才可以访问共享目录。关于创建匿名共享、多用户权限管理以及域控制器相关内容,我们会另外发布教程专门介绍。…

oracle日记账单据编号未生成_商管财务数据平台Oracle与共享未付池差异如何核对、解决?...

‍‍近期,总部新上线财务数据平台啦!各个系统间的差异异常数据清晰可见,随时可查,今天就和小伙伴们一起分享一下Oracle与共享未付池差异如何核对、解决。首先,将Oracle与共享未付池差异数据导出。由于导出的数据包括本…

android paint 圆角 绘制_[BOT] 一种android中实现“圆角矩形”的方法

内容简介文章介绍ImageView(方法也可以应用到其它View)圆角矩形(包括圆形)的一种实现方式,四个角可以分别指定为圆角。思路是利用“Xfermode Path”来进行Bitmap的裁剪。背景圆角矩形实现的方法应该很多,网上一大堆。很怀疑为啥安卓的控件不内置这样的属…

Cisco TrustSec(理解)

1、Cisco TrustSec的限制当指定了无效的设备ID时,受保护的访问凭据(Protected access credential,PAC)设置将失败并保持挂起状态。 即使在清除PAC并配置正确的设备ID和密码后,PAC仍然会失败。作为解决方法,…

Java 8仍然需要LINQ吗? 还是比LINQ更好?

长期以来, LINQ是.NET软件工程生态系统中发生的最好的事情之一。 通过在Visual Studio 2008中引入lambda表达式和monads ,它使C#语言比Java(当时的版本6)更先进,并且仍在讨论泛型类型擦除的优缺点。 这项成…

web前端(12)—— 页面布局2

本篇博文,主要就讲定位的问题,也就是页面布局里最重要的,本篇博文不出意外的话,也是css的最后一篇博文了 定位,position属性 定位有三种: 相对定位绝对定位固定定位 相对定位,position&#x…

python pyplot中axis_Python Pyplot xaxis未显示在图形上

pyplot未在图形上显示x轴:import pandas as pdimport matplotlib.pyplot as pltdf pd.read_csv(sitka_weather_2014.csv)df[AKST] pd.to_datetime(df.AKST)df[Dates] df[AKST].dt.strftime(%b %d, %Y)df.set_index("Dates", inplace True)# Plot Dataf…