在页面中插入一个隐藏的层,用CSS为其指定各种属性
<
DIV
id
="Progress"
style
="Z-INDEX: 10; FILTER: alpha(opacity=100); LEFT: 250px; VISIBILITY: hidden; MARGIN: 3px; WIDTH: 300px; POSITION: absolute; TOP: 250px; HEIGHT: 150px; BACKGROUND-COLOR: #f5f5f5"
ms_positioning ="GridLayout" >
< Table height ="100%" width ="100%" border ="1" bordercolor ="#666666" cellspacing ="0" cellpadding ="2" >
< tr >
< td height ="25" class ="bartitle1" >< img src ="/images/base.gif" border ="0" align ="absMiddle" > Please
Wait </ td >
</ tr >
< tr >
< td height ="100%" align =center valign =middle>
<img border ="0" align ="absMiddle" src ="/images/progress.gif" >
< br > Please Wait A minute < Br > System is Loading Data Now
</ td >
</ tr >
</ Table >
</ DIV >
ms_positioning ="GridLayout" >
< Table height ="100%" width ="100%" border ="1" bordercolor ="#666666" cellspacing ="0" cellpadding ="2" >
< tr >
< td height ="25" class ="bartitle1" >< img src ="/images/base.gif" border ="0" align ="absMiddle" > Please
Wait </ td >
</ tr >
< tr >
< td height ="100%" align =center valign =middle>
<img border ="0" align ="absMiddle" src ="/images/progress.gif" >
< br > Please Wait A minute < Br > System is Loading Data Now
</ td >
</ tr >
</ Table >
</ DIV >
我为了好看,做了一个两行一列的表格,做成类似对话框的样子,并且在其中放入了一个名为PROGRESS.GIF的动画图片
接下来,我们借助于JS处理一下WINDOW_ONBEFOREUNLOAD事件,BeforeUnload事件发生于离开当前页转向其他页面之前
,我们只要在处理这个事件的代码中,将之前隐藏的LOADING效果层显示出来就行了,由于页面转向其他页时,在收到服务器端回应前IE会继续显示当前页,所以,就成了类似的LOADING效果
<
script language
=
javascript
for
=
window event
=
onbeforeunload
>
<!--
return window_onbeforeunload()
// -->
</ script >
< script id = clientEventHandlersJS language = javascript >
<!--
function window_onbeforeunload()
{
var MsgObj = document.getElementById( " Progress " );
if (MsgObj != null )
{
MsgObj.style.pixelLeft = (screen.availWidth - MsgObj.style.pixelWidth) / 2 ;
MsgObj.style.pixelTop = (screen.availHeight - MsgObj.style.pixelHeight) / 2 ;
MsgObj.style.visibility = " visible " ;
}
}
// -->
</ script >
<!--
return window_onbeforeunload()
// -->
</ script >
< script id = clientEventHandlersJS language = javascript >
<!--
function window_onbeforeunload()
{
var MsgObj = document.getElementById( " Progress " );
if (MsgObj != null )
{
MsgObj.style.pixelLeft = (screen.availWidth - MsgObj.style.pixelWidth) / 2 ;
MsgObj.style.pixelTop = (screen.availHeight - MsgObj.style.pixelHeight) / 2 ;
MsgObj.style.visibility = " visible " ;
}
}
// -->
</ script >
在上面的代码中, 为了美观,我还用了SCREEN对象的availWidth属性来计算LOADING层的位置,使其居中呢
效果真的不错,试试吧