DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> 圖片加載進度實時顯示
圖片加載進度實時顯示
編輯:JavaScript綜合知識     

 <html>

  <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>網頁特效代碼|JsCode.CN|---圖片加載進度實時顯示</title> <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[0].src="http://www.jscode.cn/JsCode/images/royale.jpg"; imgs[1].src="http://www.jscode.cn/JsCode/images/c0407.jpg"; imgs[2].src="http://www.jscode.cn/JsCode/images/royale.jpg"; imgs[3].src="http://www.jscode.cn/JsCode/images/c0407.jpg"; imgs[4].src="http://www.jscode.cn/JsCode/images/royale.jpg"; imgs[5].src="http://www.jscode.cn/JsCode/images/c0407.jpg"; }   </script> </head>   <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>   </html>

  提示:您可以先修改部分代碼再運行

  1、在IE、FF中測試,只在IE出現文字溢出現象。

  說明:注釋造成文字溢出是IE的BUG。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved