图片加载进度实时显示

2005-12-29 22:18:59

[code]<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> [/code] 改 [code]<script> var l=0; var imgs; var sum=0; var imgs=new Array(); function chk(){ l--; document.getElementById("aa").innerText=""+((sum-l)*100/sum)+"%" if (l==0){ for (var i=0;i<sum;i++) document.body.innerHTML+="<img src='"+imgs[i].src+"'>" } } if (document.images){ imgs[0]=new Image() imgs[1]=new Image() imgs[2]=new Image() imgs[3]=new Image() imgs[4]=new Image() imgs[5]=new Image() imgs[6]=new Image() imgs[7]=new Image() imgs[8]=new Image() imgs[9]=new Image() imgs[10]=new Image() imgs[11]=new Image() imgs[12]=new Image() imgs[13]=new Image() imgs[14]=new Image() imgs[15]=new Image() imgs[16]=new Image() imgs[0].src="http://www.dingdiancity.net/attachments/ePgK_SnVuZS7W8rniyvc=.jpg"; imgs[1].src="http://www.dingdiancity.net/attachments/guLv_TWFyY2guxc61vcfvu8bR48il.jpg"; imgs[2].src="http://www.dingdiancity.net/attachments/O6Vg_QXVnLrbAy7w=.jpg"; imgs[3].src="http://www.dingdiancity.net/attachments/BQIi_SnVseS63c37.jpg"; imgs[4].src="http://www.dingdiancity.net/attachments/5BUU_09DStrfXt8k=.jpg"; imgs[5].src="http://www.dingdiancity.net/attachments/5apt_SnVseS7D+tDE.jpg"; imgs[6].src="http://www.dingdiancity.net/attachments/b8Pm_x+m8xNGpt8k=.jpg"; imgs[7].src="http://www.dingdiancity.net/attachments/8DJp_TWFyY2gutLDN4g==.jpg"; imgs[8].src="http://www.dingdiancity.net/attachments/EmOa_wuTRqcHLLrzSu7nOtLW9.jpg"; imgs[9].src="http://www.dingdiancity.net/attachments/jy0K_tLDN4i7B+MCu6q1xg==.jpg"; imgs[10].src="http://www.dingdiancity.net/attachments/D3sn_T2N0LrOkvdfUtsPF.jpg"; imgs[11].src="http://www.dingdiancity.net/attachments/nnsr_yfrI1cb4xI=.jpg"; imgs[12].src="http://www.dingdiancity.net/attachments/bAsZ_t8W3yQ==.jpg"; imgs[13].src="http://www.dingdiancity.net/attachments/EyAF_wsOzzA==.jpg"; imgs[14].src="http://www.dingdiancity.net/attachments/v0L7_SnVseS615g==.jpg"; imgs[15].src="http://www.dingdiancity.net/attachments/jJc4_U2VwdC61yMr3uMk=.jpg"; imgs[16].src="http://xmelife.com/bbs/UploadFile/2005-9/20059810195963291.jpg"; } </script> <body> <div id="aa">0%</div> <script> sum=l=imgs.length; for (var i=0;i<l;i++){ imgs[i].onload=chk; imgs[i].onerror=chk;//无论图片是否加载成功,都执行指定方法 } </script> </body> [/code] 下面的只可以加载完图片后才显示内容,flash的不可以吗? [code] <script> var l=0; var imgs; var sum=0; var imgs=new Array(); function chk(){ l--; document.getElementById("aa").innerText=""+((sum-l)*100/sum)+"%" var myobj=document.getElementById("bb"); myobj.style.width=((sum-l)*100/sum)*200/100; if (l==0){ document.getElementById("bodyy").style.display="block" for (var i=0;i<sum;i++) document.body.innerHTML+="<img src='"+imgs[i].src+"'>" } } if (document.images){ imgs[0]=new Image() imgs[1]=new Image() imgs[2]=new Image() imgs[3]=new Image() imgs[4]=new Image() imgs[5]=new Image() imgs[6]=new Image() imgs[7]=new Image() imgs[8]=new Image() imgs[9]=new Image() imgs[10]=new Image() imgs[11]=new Image() imgs[12]=new Image() imgs[13]=new Image() imgs[14]=new Image() imgs[15]=new Image() imgs[16]=new Image() //下面使用网络上的大图片 imgs[0].src="http://www.dingdiancity.net/attachments/ePgK_SnVuZS7W8rniyvc=.jpg"; imgs[1].src="http://www.dingdiancity.net/attachments/guLv_TWFyY2guxc61vcfvu8bR48il.jpg"; imgs[2].src="http://www.dingdiancity.net/attachments/O6Vg_QXVnLrbAy7w=.jpg"; imgs[3].src="http://www.dingdiancity.net/attachments/BQIi_SnVseS63c37.jpg"; imgs[4].src="http://www.dingdiancity.net/attachments/5BUU_09DStrfXt8k=.jpg"; imgs[5].src="http://www.dingdiancity.net/attachments/5apt_SnVseS7D+tDE.jpg"; imgs[6].src="http://www.dingdiancity.net/attachments/b8Pm_x+m8xNGpt8k=.jpg"; imgs[7].src="http://www.dingdiancity.net/attachments/8DJp_TWFyY2gutLDN4g==.jpg"; imgs[8].src="http://www.dingdiancity.net/attachments/EmOa_wuTRqcHLLrzSu7nOtLW9.jpg"; imgs[9].src="http://www.dingdiancity.net/attachments/jy0K_tLDN4i7B+MCu6q1xg==.jpg"; imgs[10].src="http://www.dingdiancity.net/attachments/D3sn_T2N0LrOkvdfUtsPF.jpg"; imgs[11].src="http://www.dingdiancity.net/attachments/nnsr_yfrI1cb4xI=.jpg"; imgs[12].src="http://www.dingdiancity.net/attachments/bAsZ_t8W3yQ==.jpg"; imgs[13].src="http://www.dingdiancity.net/attachments/EyAF_wsOzzA==.jpg"; imgs[14].src="http://www.dingdiancity.net/attachments/v0L7_SnVseS615g==.jpg"; imgs[15].src="http://www.dingdiancity.net/attachments/jJc4_U2VwdC61yMr3uMk=.jpg"; imgs[16].src="http://xmelife.com/bbs/UploadFile/2005-9/20059810195963291.jpg"; } </script> <style type="text/css"> <!-- #a { height: 20px; width: 200px; border: 2px solid #666666; } #a #aa { height: 20px; position: absolute; } #a #bb { background-color: #FF0000; height: 20px; width: 0px; } #bodyy { height: 100%; width: 100%; background-color: #CCCCCC;display:none; } --> </style> <body> <div id="a"> <div id="aa">0%</div> <div id="bb"></div> </div> <div id="bodyy">加载完图片后,才显示内容<br>加载完图片后,才显示内容<br>加载完图片后,才显示内容<br>加载完图片后,才显示内容<br>加载完图片后,才显示内容<br>加载完图片后,才显示内容<br>加载完图片后,才显示内容<br>加载完图片后,才显示内容<br></div> <script> sum=l=imgs.length; for (var i=0;i<l;i++){ imgs[i].onload=chk; imgs[i].onerror=chk;//无论图片是否加载成功,都执行指定方法 } </script> </body> [/code]