May 9, 2015

html照片从模糊到清晰的渐变加载显示方法

By Gideon Div / Css / XML / HTML5 / SVG 0 Comments

1.背景介绍
在网络相册应用中用户查看照片是最朴素的需求，当网络比较慢的时候查看照片等待的时间是比较长的，用户体验会很差。

2.现状
现在加载照片的方法主要有一下两种：
（1）最原始的方式在html页面直接用img标签加载显示照片。该方法在网络速度比较慢或者要显示的照片比较大的时候会页面出现空白的等待过程，并且不能开始给用户看到照片大概的情况，用户体验比较不好
（2）在html页面先用img标签加载显示照片的缩略图，同时用javascript隐藏的加载照片的原图，等照片大图加载完成后再将原图显示到页面中。以下是流程图：

95f0b847d14cea7f8694739d

该方法用户可以先看到的是模糊的小图，等照片的原图加载完后才能看到真实的照片，如果网络慢的话中间等待的时间也是比较长的，用户就一直看到模糊的小图，用户体验也不好。

3.我们的解决方案
QQ相册最近做的一些优化方法解决了上诉两个方法的缺点和满足了用户查看照片的需求：第一时间看到照片大概情况和尽可能快的看到清晰的原图。该方法使用缩略图和原图同时加载并叠加显示，先加载缩略图并拉大显示，大图叠加在缩略图上面同时加载。缩略图很小通常很快就能给用户看到照片模糊的效果，大图加载过程中从上往下逐步覆盖缩略图，这样用户就可以看到加载过程中的大图。
(1)示例图

bf7bfe3d8e509a827c1e719d1

如上如所示，本方法的处理步骤是：
1.获取照片缩略图和原图的URL，获取照片的长和宽；
2.加载并显示照片缩略图，将缩略图按照片的长和宽拉伸显示，这时用户看到的是模糊的效果；
3.加载并显示照片原图，将原图叠加在缩略图上面显示，原图加载多少就显示多少，没有加载的还是显示缩略图，逐步将缩略图覆盖掉，原图在加载的过程中用户看到的是照片从模糊到清晰的渐变效果。

4.原图加载完后，原图已经全部将缩略图覆盖，这时用户看到的是真实的原图。此时可以隐藏缩略图防止缩略图干扰PNG或GIF等有透明效果的图片显示。
(2)示例代码

<!–设置照片的大小–>
<div style=”width:400px;height:300px;”>
<!–小图拉大显示–>
<img src=”small_url” style=”width:100%;height:100%;”/>
<!–原图叠加在小图上面–>
<img src=”big_url” style=”width:100%;height:100%;position:absolute;top:0px;left:0px;”/>
</div>

转载：青豆前端 » html照片从模糊到清晰的渐变加载显示方法

相关

推荐10款非常优秀的 HTML5 开发工具
HTML5 发展如火如荼，随着各大浏览器对 HTML5 技术支持的不断完善以及 HTML5 技术的不断成熟，未来 HTML5 必将改变我们创建 Web 应用程序的方式。今天这篇文章向大家推荐10款优秀的HTML5开发工具，帮助你更高效的编写 HTML5 应用。 Initializr Initializr 是制作…
CSS：去除点击链接和按钮时出现的虚线框
在前端制作的过程中会发现，一些文字/图片链接，或者一些input控件，在点击时会在周围出现虚线边框，一般会在火狐和IE浏览器下出现虚线框，谷歌下不会有。这些虚线边框是作为对视觉设计的一种辅助，在不使用鼠标，而用键盘Tab键进行页面浏览时，会标示出当前所在的链接或控件的位置，便于浏览。这对那些视觉有障碍的人士来说更是必不可少的。但是有些时候我们却不想使用它们，因为浏览器对虚线框的解析有差异，并且不规则，所以在视觉设计上反而成为了某种缺陷。所以这种时候，我们想要禁用这些虚线边框，使浏览者的视觉享受能够完美无瑕。那么，如何去除这些点击时才会出现的虚线边框呢？ 1. outline:none; 通常我们会这么写：a,input{outline:none;} 优点是代码简洁，使用一行css就能解决问题，但是也有缺点：ie6、ie7并不认识outline属性，需要配合仅ie6和ie7支持的css属性blr:expression_r(this.onFocus=this.blur());使用来达到兼容，expression 条件，这句话的意思是链接在获得焦点的同时失去焦点，但是blr不宜多用，会影响效率。 2. hidefocus=”true”; hidefocus是ie系列的专有属性，能够作用于所有ie序列的浏览器，需要配合css的outline：none。也可以写作：hidefocus=”hidefocus”; 另外，hidefocus并不是W3C推荐的标准属性。…
CSS如何去掉链接虚线框
链接的虚线框影响整体风格，我们在工作经常会将它去掉，而采用图片高亮的方式来显示焦点状态。然而去掉虚线框在两种浏览器中却分别对待，这种技巧经常用到，作个记录，以备不时之需。当一个链接得到焦点时，默认会有个虚线框。如图：在 Firefox 里可以用 -moz-outline:none; 或者 outline:none; 来将其去掉。所以我们可以这样写： a:focus { outline:none; -moz-outline:none; }…