有些页面图片过多，IE加载过慢，有时出现假死状况，导致访客丢失。
提供2款IE页面内容进度加载效果，帮你留住访客。:lol:
第一款演示:
将下列代码保存为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(" 『QQ图|QQTu.com』★页面正在加载...<\/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>
第二款演示
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>
