图片加载进度实时显示

http://bbs.blueidea.com/thread-2723360-1-1.html

有人问我如何实时显示图片加载进度，我记得以前blueidea的讨论中有人说过使用判断所有图片是否读取来显示，这次我试着写了一个，大家看看是否可行。

<script>
var l=0;
var imgs;
var sum=0;
function chk(){
  document.getElementById("aa").innerText=""+((sum-l)*100/sum)+"%"
  l--;
  if (l==0){
    for (var i=0;i<imgs.length;i++){
      imgs[i].style.display='';
    }
  }
}
</script>
<body>
<img src="http://www.dingdiancity.net/attachments/ePgK_SnVuZS7W8rniyvc=.jpg"/>
<img src="http://www.dingdiancity.net/attachments/guLv_TWFyY2guxc61vcfvu8bR48il.jpg"/>
<img src="http://www.dingdiancity.net/attachments/O6Vg_QXVnLrbAy7w=.jpg"/>
<img src="http://www.dingdiancity.net/attachments/BQIi_SnVseS63c37.jpg"/>
<img src="http://www.dingdiancity.net/attachments/5BUU_09DStrfXt8k=.jpg"/>
<img src="http://www.dingdiancity.net/attachments/5apt_SnVseS7D+tDE.jpg"/>
<img src="http://www.dingdiancity.net/attachments/b8Pm_x+m8xNGpt8k=.jpg"/>
<img src="http://www.dingdiancity.net/attachments/8DJp_TWFyY2gutLDN4g==.jpg"/>
<img src="http://www.dingdiancity.net/attachments/EmOa_wuTRqcHLLrzSu7nOtLW9.jpg"/>
<img src="http://www.dingdiancity.net/attachments/jy0K_tLDN4i7B+MCu6q1xg==.jpg"/>
<img src="http://www.dingdiancity.net/attachments/D3sn_T2N0LrOkvdfUtsPF.jpg"/>
<img src="http://www.dingdiancity.net/attachments/nnsr_yfrI1cb4xI=.jpg"/>
<img src="http://www.dingdiancity.net/attachments/bAsZ_t8W3yQ==.jpg"/>
<img src="http://www.dingdiancity.net/attachments/EyAF_wsOzzA==.jpg"/>
<img src="http://www.dingdiancity.net/attachments/v0L7_SnVseS615g==.jpg"/>
<img src="http://www.dingdiancity.net/attachments/jJc4_U2VwdC61yMr3uMk=.jpg"/>
<img src="http://xmelife.com/bbs/UploadFile/2005-9/20059810195963291.jpg"/>
<div id="aa"></div>
<script>
imgs=document.getElementsByTagName("img");
sum=l=imgs.length;
for (var i=0;i<l;i++){
  imgs[i].onload=chk;
  imgs[i].onerror=chk;//无论图片是否加载成功，都执行指定方法
  imgs[i].style.display='none';
}
</script>
</body>