ant 部署web项目:怎样实现真正的网页加载Loading??

来源:百度文库 编辑:神马品牌网 时间:2024/04/27 21:55:45
要说明的是,这个loading并不是一个跳转的效果.是在一个页面打开的时候,出现loading..当页面的全部数据下载完成以后,就关闭这个loading.

当刷新这个页面的时候,由于已经下载过,这个loading也随着下载的快慢来决定出现的时间.

要求用:asp+javascript来实现

Javascript代码:

function loadBar(fl)
//fl is show/hide flag
{
var x,y;
if (self.innerHeight)
{// all except Explorer
x = self.innerWidth;
y = self.innerHeight;
}
else
if (document.documentElement && document.documentElement.clientHeight)
{// Explorer 6 Strict Mode
x = document.documentElement.clientWidth;
y = document.documentElement.clientHeight;
}
else
if (document.body)
{// other Explorers
x = document.body.clientWidth;
y = document.body.clientHeight;
}

var el=document.getElementById('loader');
if(null!=el)
{
var top = (y/2) - 50;
var left = (x/2) - 200;
if( left<=0 ) left = 10;
el.style.visibility = (fl==1)?'visible':'hidden';
el.style.display = (fl==1)?'block':'none';
el.style.left = left + "px"
el.style.top = top + "px";
el.style.zIndex = 2;
}
}

用法:

1、在body里面加载 onload=loadBar(0)

2、定义loading 的内容,并把ID命名为loader,最好把loading 的整个内容设置为一定的透明度,这样才像loading嘛

3、如下:

<body bgcolor="edebe4" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload=loadBar(0)>
<DIV id=loader>
<TABLE class=loader style="FILTER: Alpha(opacity=75)" cellSpacing=1
cellPadding=5 bgColor=#bbbbb border=0>
<TBODY>
<TR>
<TD align=left bgColor=#ffffff>
<P><IMG style="MARGIN: 3px" height=32 alt=数据载入中...
src="load/wait.gif" width=32
align=left><STRONG><font style="font-size:9pt">页面数据载入中,请稍后...</font></STRONG><BR><SPAN><font style="font-size:9pt">Please wait until this screen is completely loaded...!</font>
</SPAN></P></TD></TR></TBODY></TABLE></DIV>
<SCRIPT language=JavaScript type=text/javascript>loadBar(1);</SCRIPT>