图片渐变加载

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

 

(1)示例图

如上如所示,本方法的处理步骤是:

1.获取照片缩略图和原图的URL,获取照片的长和宽;

2.加载并显示照片缩略图,将缩略图按照片的长和宽拉伸显示,这时用户看到的是模糊的效果;

3.加载并显示照片原图,将原图叠加在缩略图上面显示,原图加载多少就显示多少,没有加载的还是显示缩略图,逐步将缩略图覆盖掉,原图在加载的过程中用户看到的是照片从模糊到清晰的渐变效果。

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

 

(2)示例代码

<!–设置照片的大小–>

<div>

<!–小图拉大显示–>

<img src=”small_url”/>

<!–原图叠加在小图上面–>

<img src=”big_url”/>

</div>

本文固定链接: http://www.ccsbbs.com.cn/archives/5777.html | 极限手指

该日志由 极限手指 于2013年03月01日发表在 PHP 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 图片渐变加载 | 极限手指

图片渐变加载:等您坐沙发呢!

发表评论

您必须 [ 登录 ] 才能发表留言!