javascript实现页面加载进度条
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<mce:script type="text/javascript"><!--
document.write('<div id="loadbox"><span>加载中,请耐心等待</span><img src="http://www.funly.cn/img/load.gif" mce_src="http://www.funly.cn/img/load.gif" width="160" height="20" /></div>');
window.onload = function () {
document.getElementById('loadbox').style.display="none";
document.getElementById('imglist').style.display="block";
}
// --></mce:script>
<mce:style type="text/css"><!--
body {background-color:#000;}
#imglist { display:none;color:#FFFFFF;}
#loadbox { width:160px;height:60px; position:absolute;top:50%;left:50%;margin-left:-80px;margin-top:-30px;}
#loadbox span {height:30px;display:block;width:160px;text-align:center; color:#FFF; font-size:12px;}
--></mce:style><style type="text/css" mce_bogus="1">body {background-color:#000;}
#imglist { display:none;color:#FFFFFF;}
#loadbox { width:160px;height:60px; position:absolute;top:50%;left:50%;margin-left:-80px;margin-top:-30px;}
#loadbox span {height:30px;display:block;width:160px;text-align:center; color:#FFF; font-size:12px;}</style>
</HEAD>
<BODY>
<div id="imglist">
<h1>欧文加油!</h1>
<img src="http://ii.a.5d6d.com/userdirs/e/6/realmadrid/attachments/month_0907/09070408514f0af09934c90548.jpg" mce_src="http://ii.a.5d6d.com/userdirs/e/6/realmadrid/attachments/month_0907/09070408514f0af09934c90548.jpg" width="500" height="413" />
<img src="http://www.insun.com.cn/pu/Picture/star/om_m/554798pic321-com-13.jpg" mce_src="http://www.insun.com.cn/pu/Picture/star/om_m/554798pic321-com-13.jpg" width="800" height="600" />
</div>
</BODY>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<mce:script type="text/javascript"><!--
document.write('<div id="loadbox"><span>加载中,请耐心等待</span><img src="http://www.funly.cn/img/load.gif" mce_src="http://www.funly.cn/img/load.gif" width="160" height="20" /></div>');
window.onload = function () {
document.getElementById('loadbox').style.display="none";
document.getElementById('imglist').style.display="block";
}
// --></mce:script>
<mce:style type="text/css"><!--
body {background-color:#000;}
#imglist { display:none;color:#FFFFFF;}
#loadbox { width:160px;height:60px; position:absolute;top:50%;left:50%;margin-left:-80px;margin-top:-30px;}
#loadbox span {height:30px;display:block;width:160px;text-align:center; color:#FFF; font-size:12px;}
--></mce:style><style type="text/css" mce_bogus="1">body {background-color:#000;}
#imglist { display:none;color:#FFFFFF;}
#loadbox { width:160px;height:60px; position:absolute;top:50%;left:50%;margin-left:-80px;margin-top:-30px;}
#loadbox span {height:30px;display:block;width:160px;text-align:center; color:#FFF; font-size:12px;}</style>
</HEAD>
<BODY>
<div id="imglist">
<h1>欧文加油!</h1>
<img src="http://ii.a.5d6d.com/userdirs/e/6/realmadrid/attachments/month_0907/09070408514f0af09934c90548.jpg" mce_src="http://ii.a.5d6d.com/userdirs/e/6/realmadrid/attachments/month_0907/09070408514f0af09934c90548.jpg" width="500" height="413" />
<img src="http://www.insun.com.cn/pu/Picture/star/om_m/554798pic321-com-13.jpg" mce_src="http://www.insun.com.cn/pu/Picture/star/om_m/554798pic321-com-13.jpg" width="800" height="600" />
</div>
</BODY>
</html>