实现原理是在页面的最上方放置一个很大的层遮盖住页面,在这个层里面用一个gif动画表示等待,然后在页面的ONLOAD事件里面将这个层隐藏掉
下面的代码示例是在此基础上加上了一些信息(如加载时间,加载过程中的.......)的提示,并且在加载完毕后停顿一下,显示"加载完毕，耗时x秒，转向主界面......."的提示信息后显示原来的页面,注意,BODY属性里面把横向/纵向滚动条隐藏掉了,以防止层过大而出现"穿邦",以下代码复制到</HEAD>与之间,并且在<BODY>中加上 style="overflow-x:hidden;overflow-y:hidden" onLoad="isLoaded=1" 修饰即可
<div id="ld" style="position:absolute; left:-1px; top:1px; width:1032px; height:694px; background-color:#FFFFFF; z-index:1000;">
<div id="center" style="position:absolute;">
<table border="0"><tr><td><span id="disp">页面加载中,请等待</span></td></tr>
<tr><td><img src="images/99.gif"></td></tr>
</table>
</div>
</div>
<script language="JavaScript">
<!--
self.resizeTo(screen.availWidth,screen.availHeight);
center.style.left=document.body.clientWidth/2;
center.style.top=document.body.clientHeight/2;
var sum=0;
var isLoaded=0;
var tmp;
var start = new Date().getTime();
load();
function load()
{
sum++;
time = setTimeout("load()",100);
if (isLoaded==1)
{
clearTimeout(time);
tmp=setTimeout("loaded()",1500);
var a = new Date().getTime()-start;
a=(a/1000).toFixed(2);
disp.innerHTML="加载完毕，耗时"+a+"秒，转向主界面........";
}else{
if(sum<10)
disp.innerHTML=disp.innerHTML+"..";
else{
sum=0;
disp.innerHTML="页面加载中,请等待..";
}
}
}
function loaded(){
ld.style.display="none";
clearTimeout(tmp);
}
-->
</script>
<bodystyle="overflow-x:hidden;overflow-y:hidden" onLoad="isLoaded=1">
[AJAX]页面加载完成前的等待效果
时间：2010/12/22 22:23:28 点击：
作者：不详 来源：网络
相关文章
共有评论 0 条相关评论
发表我的评论
- 大名：
- 内容：
本类热门
- 03-21·div相对定位和div绝对定位
- 12-22·[AJAX]页面加载完成前的等待效果
- 03-25·最完整的IIS安装程序下载
- 04-01·ie8不兼容,网页显示不正常,css如何兼容ie8
- 06-27·针对IE8正式版的CSS hack
- 12-22·Ajax实现页面加载等待
- 04-28·类似QQ里点连接，提示打开还是复制的效果
- 08-23·asp自动识别URL网址链接的函数
- 03-21·div+css实例分享：非常不错的页面制作方法
- 04-28·非常酷的拖拽翻页效果
本类推荐
- 没有
本类固顶
- 没有
部分文章来源于网络,若侵犯了您的权益请跟我们联系！
