照片预加载过渡

星期四 09.27.2007 - Posted in 互联网产品设计, , - 4,546 views
留意Flickr的照片加载过程,再正常不过的效果,网络上所有图片都这么解析的。 对比一下Picasa的效果,没有初始的加载空白区域,直接使用模糊效果过渡。 看到这里,突然想起一个古老的属...

留意Flickr的照片加载过程,再正常不过的效果,网络上所有图片都这么解析的。

flickr_photo.jpg

对比一下Picasa的效果,没有初始的加载空白区域,直接使用模糊效果过渡。

picasa_photo.jpg

看到这里,突然想起一个古老的属性lowsrc,差不多就是预加载的意思,很难得看到应用。简单分析了Picasa的处理过程,似乎也不是lowsrc实现的(lowsrc支持IE?),使用ajax机制,并且严格控制了中间空白时间,效果更流畅和平滑。

第一步,先加载这个7k缩略图,放大显示。

picasa_loading.jpg

第二步,等这张60k大图加载完之后,动态替换,替换过程如果能平滑一些更柔和。

picasa_done.jpg

数据预加载,在流畅程度上提高易用性,一直是Google的强项,值得学习。Picasa的方案要多载入一张照片,整体效果能提高用户体验么,有没有朋友留意?

这里还有一篇关于客户端图片预加载的技术解决方案探讨。

© 一叶千鸟(转载请留原文链接,更新于2008年04月09日11点)

16条评论 发表»

scavin says:

体验还是很明显的,picasa 那种方式让我很有期待性,而传统方式容易让人烦躁

白鸦 says:

臭鱼色迷迷的笑,,好像是我拍的

for3w says:

说实话我还是喜欢传统的照片加载方式,一半一半慢慢下来。Picasa的这种方式看上去不错,但用起来实在是相当的难受(我无法描述这种难受),也是我不用Picasa的一个重要原因。

千鸟 says:

我也不确定,所以最后没下结论。

但能看到一种趋势,包括live也是这样,很多灯具现在都渐变,还有飞机,哪个型号忘了。其实我更关注的是这个实现方案,新概念来完善老技术。

云天说的不用Picasa的重要原因,倒让我挺意外,呵呵。

PS. 是白鸦拍的,我们把臭鱼炒红吧。

家儒 says:

等 css3 出台後,用
background-repeat: stretch
就甚麼都搞定了,TMD IE!

白鸦 says:

好, 炒红臭鱼。

现在开始大家保持默契:
以后大家写文章用图片示例只有是人物全部都用臭鱼的。而且全部都用千鸟放的这张。
该图片地址:http://picasaweb.google.com/whitecrow.zhu/0707/photo#5101425807481856178

千鸟 says:

图片已加链接。

chuyue says:

跟jpeg编码格式也相关,有些可以做到先模糊后清晰;

nowgoo says:

渐进式jpeg吧。。。

千鸟 says:

Jpeg始终摆脱不了分层解析的宿命,不是一个概念。

xw says:

这个应该很速度有关系,如果你的速度过于缓慢的话,那么就一直停留在模糊图片上,这个时候会让用户,觉得莫名其妙,照片都是模糊的,但是如果速度快一些的话效果就会好,感觉是有弹性的感觉,说实话觉得Google那么做是因为让效果看起来更绚一些,而不是因为速度慢 :)

其实如果速度慢用ajax的loading图标到是一个不错的选择

随花飞 says:

哈哈,臭鱼笑得这么开怀阿

臭鱼 says:

我 我 我…..你 你 你

选也选张像样点儿的照片啊!这照片到处散去,我还不得打一辈子光棍儿啊?!

azure says:

能讲一讲是如何实现的吗

springpark says:

同问 是如何实现的

发表评论

Spammer必读