谈谈关于图片加载进度

Other 2013-01-05 图片,进度,加载

确切的说,图片加载进度的实现在当今中国的假宽带现象里仍有很大的用户体验,悲催的是单靠JS做不到。

这里说的图片加载进度可能有两种含义:

第一种,单张图片实时加载进度(JS实现不了)

第二种,多张图片以数量来模拟加载进度 (容易实现)

在网上搜索“图片加载进度”几乎说的都是第二种含义,而谈及第一种的甚少, 原因就是JS实现不了!

第一种的图片实时加载进度目前几乎都是与AS交互实现,因为Flash有读取加载进度的功能并且又能与JS交互。因此这种模式就是在网页中嵌入一个不现实的FLASH,然后在加载图片的时候出发FLASH的实时进度读取功能,然后把数据回传给JS,JS再去计算出百分比,实时的显示在网页上!从而实现图片加载的实时进度!

第二种就比较容易了,先获取图片的总数量,然后利用图片的onload触发一个函数去实时显示总图片加载进度。注意:这里只是图片的总加载进度,而不是精确加载进度!打个比方,有10张图,实际已经加载了两张半,但只会触发两次onload,所以结果只能是10%递增,不会出现1% 到 2%这样的精确,比如有4张图片,那么就是25%的递增!

其实还有另外一种方式,就是使用new Image实现。在图片位置显示一个loading动态的gif图,当图片onload后再把图片切上,这也是一种不错的处理方式,只是没有百分比的实时进度!当用户的网络速度达到一定速度以后,图片使用百分比来显示进度就没有任何意义了。就拿摄影站点来说,这些网站图片都比较大,但通常达到电脑屏幕大小而不太失真的图片大小可能也就500K左右,现在大多数朋友加载500K的图片相信不会等待漫长的时间。但最终还是有一个比较短暂的等待过程,故而这个短暂的过程使用gif图代替显示着就比较好!

文字链接:《谈谈关于图片加载进度

文章地址:http://www.qttc.net/201301263.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 0

    Hi,你想第一个做沙发么?