页面加载代码
分类：电脑知识 发表于：2009-03-03 13:00:40 评论(0)
1. 跳转网页型加载
<script language="javascript">
function setSB(v, el) {
var ie5 = (document.all && document.getElementsByTagName);
if (ie5 || document.readyState == "complete") {
filterEl = el.children[0];
valueEl = el.children[1];
filterEl.style.width = v + "%";
valueEl.innerText = v + "%";
}
}
function fakeProgress(v, el) {
if (v > 100)
location.href = "";
else {
setSB(v, el);
window.setTimeout("fakeProgress(" + (++v) + ", document.all['" + el.id + "'])", 20);
}
}
</script>
<body onload="fakeProgress(0, sb)" topmargin=180 bgcolor=#eeeeee>
<center>
<font color=gray> <p align=center style="color: #0085dd; font-family: 宋体; font-szie:12px; line-height: 100%">载入中，请稍侯．．．</p></font>
<span id=sb style="width: 300px">
<div style="filter: Alpha(Opacity=0, FinishOpacity=60, style=1, StartX=0, StartY=0, FinishX=100, FinishY=0); width: 0%; height: 12px; position: absolute; background: #9999ff"></div>
<div style="font-size: 12px; width: 100%; color: #ff3333; font-family: arial; text-align: center"></DIV>
</span>
</center>
2.不跳转，遮盖型加载
<script language="JavaScript" type="text/javascript">
var t_id = setInterval(animate,20);
var pos=0;
var dir=2;
var len=0;
function animate()
{
var elem = document.getElementById('progress');
if(elem != null) {
if (pos==0) len += dir;
if (len>32 || pos>79) pos += dir;
if (pos>79) len -= dir;
if (pos>79 && len==0) pos=0;
elem.style.left = pos;
elem.style.width = len;
}
}
function remove_loading() {
this.clearInterval(t_id);
var targelem = document.getElementById('loader_container');
targelem.style.display='none';
targelem.style.visibility='hidden';
}
setTimeout("remove_loading()", 5000);
</script>
<style>
#loader_container {
text-align:center;
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background-color:#FFFFFF;
z-Index:1000;
}
#loader {
font-family:Tahoma, Helvetica, sans;
font-size:11.5px;
color:#000000;
background-color:#FFFFFF;
padding:10px 0 16px 0;
margin:0 auto;
display:block;
width:130px;
border:1px solid #5a667b;
text-align:left;
position:absolute;
top:200px;
}
#progress {
height:5px;
font-size:1px;
width:1px;
position:relative;
top:1px;
left:0px;
background-color:#8894a8;
}
#loader_bg {
background-color:#e4e7eb;
position:relative;
top:8px;
left:8px;
height:7px;
width:113px;
font-size:1px;
}
</style>
<body >
<div id="loader_container">
<div id="loader">
<div align="center">页面正在加载中 ...</div>
<div id="loader_bg"><div id="progress"> </div></div>
</div>
</div>
<div>显示内容</div>
</body>
