页面正在加载中代码(网页打开慢时用)

1。
列代码保存为load.JS文件

    var s1 = setInterval("loading.innerText+='.'", 500);
    var s2 = setInterval("loading.innerText = ''", 8000);

    function window.onload()
    {
      clearInterval(s1);
      clearInterval(s2);
      loadingDiv.removeNode(true);

    }
document.writeln("<div id="loadingDiv" style="z-index:50000;position:absolute;left:expression((this.parentElement.offsetWidth-this.offsetWidth)/2);top:expression((document.body.clientHeight-this.style.pixelHeight)/3+document.body.scrollTop);">");
document.writeln(" <table border="1" width="260" cellspacing="0" cellpadding="4" style="border-collapse: collapse;FILTER: Alpha(opacity=95)" bgcolor="#ffffff">");
document.writeln(" <tr>");
document.writeln("   <td bgcolor="#2D2D2D">");
document.writeln("    <table width="100%" border="0" cellspacing="0" cellpadding="0">");
document.writeln(" <tr>");
document.writeln("   <td style="font-size:12px;color:#ffffff">");
document.writeln("    『lossr.net』★页面正在加载…</td>");
document.writeln("   <td width="1">");
document.writeln(" <span title=关闭 style="CURSOR: hand;color:white;font-size:12px;font-weight:bold;margin-right:4px;" onClick="document.all.loadingDiv.style.display='none'">×</span>   </td>");
document.writeln(" </tr>");
document.writeln("    </table>");
document.writeln("   </td>");
document.writeln(" </tr>");
document.writeln(" <tr>");
document.writeln("   <td>");
document.writeln("    <table width="100%" border="0" cellspacing="0" cellpadding="0">");
document.writeln("     <tr>");
document.writeln("   <td width="35" align="center">");
document.writeln("    <img src="/js/loadding.gif" width="32"> </td>");
document.writeln("   <td style="font-size:12px;color:#000000">站点正在加载图片,请您耐心等待….<span id="loading"></span>");
document.writeln("   </td>");
document.writeln("     </tr>");
document.writeln("   </table></td>");
document.writeln("   </tr>");
document.writeln(" </table>");
document.writeln("</div>")
document.writeln("<SCRIPT LANGUAGE="javascript"> ");
document.writeln("<!– Hide ");
document.writeln("function killErrors() { ");
document.writeln("return true; ");
document.writeln("} ");
document.writeln("window.onerror = killErrors; ");
document.writeln("// –> ");
document.writeln("</SCRIPT>");

在HEAD中加入

<script language="JavaScript" type="text/javascript" src="/js/load.js"></script>

2。
JS文件代码 保存为LOAD.js

<!–

//页面加载中效果开始
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';
}

CSS代码 保存为css.css

/* 页面加载特效 */
#loader_container {
    text-align:center;
    position:absolute;
    top:40%;
    width:100%;
    left: 0;
}
#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;
    z-index:2;
}
#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;
}

紧跟<body>中加入

<div id="loader_container">
<div id="loader" style="width: 130px; height: 48px">
<div align="center"><font color="#FF9900">页面正在加载中 <br>
请稍候…</font></div>
<div id="loader_bg"><div id="progress"> </div></div>
</div>
</div>

<head>间加入

<style type="text/css" title="currentStyle" media="screen">
@import "css.css";
</style>
<script language="JavaScript" src="load.js"></script>

</body>前加入

<script language="javascript">
remove_loading();
</script>

以上是两种方法,loadding.gif为加载中效果图片,可以自己找个喜欢的

发表评论

邮箱地址不会被公开。 必填项已用*标注

click to changeSecurity Code