关于图片加载进度

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

  • 第一种,单张图片实时加载进度(浏览器实现不了)
  • 第二种,多张图片以数量来模拟加载进度(容易实现)

【爆款云服务器限时促销】
阿里云云服务器ECS实例2核2G,新人专享渠道特惠价只要82元!特惠热卖中。 点击立即购买

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

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

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

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

分享

TITLE: 关于图片加载进度

LINK: https://www.qttc.net/263-image-loading-progress.html

NOTE: 原创内容,转载请注明出自琼台博客