您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
图片加载进度实时显示
作者：佚名 责任编辑：admin 更新时间：2022-06-22
<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。
- 上一个程序编程： 鼠标放到图片上慢慢变大
- 下一个程序编程： 解析jquery获取父窗口的元素
