图片加载进度实时显示

 1<script>   
 2var l=0;   
 3var imgs;   
 4var sum=0;   
 5function chk(){   
 6document.getElementById("aa").innerText=""+((sum-l)*100/sum)+"%"   
 7l--;   
 8if (l==0){   
 9for (var i=0;i<imgs.length;i++){   
10imgs[i].style.display='';   
11}   
12}   
13}   
14</script>
 1<body>
 2<img src="http://we2.cn/albums/00000121921.jpg"/>
 3<img src="http://we2.cn/albums/00000124969.jpg"/>
 4<img src="http://we2.cn/albums/00000128017.jpg"/>
 5<img src="http://we2.cn/albums/00000131065.jpg"/>
 6<img src="http://we2.cn/albums/00000134113.jpg"/>
 7<img src="http://we2.cn/albums/00000137161.jpg"/>
 8<img src="http://we2.cn/albums/00000140209.jpg"/>
 9<img src="http://we2.cn/albums/00000143257.jpg"/>
10<img src="http://we2.cn/albums/00000146305.jpg"/>
11<img src="http://we2.cn/albums/00000152401.jpg"/>
12<img src="http://we2.cn/albums/00000155449.jpg"/>
13<img src="http://we2.cn/albums/00000158497.jpg"/>
14<img src="http://we2.cn/albums/00000161545.jpg"/>
15<img src="http://we2.cn/albums/00000164593.jpg"/>
16<img src="http://we2.cn/albums/00000167641.jpg"/>
17<img src="http://we2.cn/albums/00000170689.jpg"/>
18<img src="http://we2.cn/albums/00000173737.jpg"/>
19<img src="http://we2.cn/albums/00000176785.jpg"/>
20<img src="http://we2.cn/albums/00000179833.jpg"/>
21<img src="http://we2.cn/albums/00000182881.jpg"/>
22<img src="http://we2.cn/albums/00000185929.jpg"/>
23<img src="http://we2.cn/albums/00000188977.jpg"/>
24<img src="http://we2.cn/albums/00000192025.jpg"/>
25<img src="http://we2.cn/albums/00000195073.jpg"/>
26<img src="http://we2.cn/albums/00000198121.jpg"/>
27<img src="http://we2.cn/albums/00000201169.jpg"/>
28<div id="aa"></div>
29<script>   
30imgs=document.getElementsByTagName("img");   
31sum=l=imgs.length;   
32for (var i=0;i<l;i++){   
33imgs[i].onload=chk;   
34imgs[i].onerror=chk;//无论图片是否加载成功,都执行指定方法   
35imgs[i].style.display='none';   
36}   
37</script>
38</body>
Published At
Categories with 网页设计
Tagged with
comments powered by Disqus