在页面中插入一个隐藏的层,用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
>
我为了好看,做了一个两行一列的表格,做成类似对话框的样子,并且在其中放入了一个名为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
>
在上面的代码中, 为了美观,我还用了SCREEN对象的availWidth属性来计算LOADING层的位置,使其居中呢
![](https://i-blog.csdnimg.cn/blog_migrate/3576ef4b9f84948a0b4fbd1f55f59b1e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3576ef4b9f84948a0b4fbd1f55f59b1e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3576ef4b9f84948a0b4fbd1f55f59b1e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3576ef4b9f84948a0b4fbd1f55f59b1e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3576ef4b9f84948a0b4fbd1f55f59b1e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3576ef4b9f84948a0b4fbd1f55f59b1e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/07f7f2110ee216794444b751661886bd.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3576ef4b9f84948a0b4fbd1f55f59b1e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3576ef4b9f84948a0b4fbd1f55f59b1e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3576ef4b9f84948a0b4fbd1f55f59b1e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3576ef4b9f84948a0b4fbd1f55f59b1e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3576ef4b9f84948a0b4fbd1f55f59b1e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/07f7f2110ee216794444b751661886bd.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/07f7f2110ee216794444b751661886bd.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3576ef4b9f84948a0b4fbd1f55f59b1e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3576ef4b9f84948a0b4fbd1f55f59b1e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3576ef4b9f84948a0b4fbd1f55f59b1e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3576ef4b9f84948a0b4fbd1f55f59b1e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3576ef4b9f84948a0b4fbd1f55f59b1e.gif)
我为了好看,做了一个两行一列的表格,做成类似对话框的样子,并且在其中放入了一个名为PROGRESS.GIF的动画图片
接下来,我们借助于JS处理一下WINDOW_ONBEFOREUNLOAD事件,BeforeUnload事件发生于离开当前页转向其他页面之前
,我们只要在处理这个事件的代码中,将之前隐藏的LOADING效果层显示出来就行了,由于页面转向其他页时,在收到服务器端回应前IE会继续显示当前页,所以,就成了类似的LOADING效果
![](https://i-blog.csdnimg.cn/blog_migrate/3576ef4b9f84948a0b4fbd1f55f59b1e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3576ef4b9f84948a0b4fbd1f55f59b1e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3576ef4b9f84948a0b4fbd1f55f59b1e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3576ef4b9f84948a0b4fbd1f55f59b1e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3576ef4b9f84948a0b4fbd1f55f59b1e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3576ef4b9f84948a0b4fbd1f55f59b1e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3576ef4b9f84948a0b4fbd1f55f59b1e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3576ef4b9f84948a0b4fbd1f55f59b1e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3576ef4b9f84948a0b4fbd1f55f59b1e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3576ef4b9f84948a0b4fbd1f55f59b1e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3576ef4b9f84948a0b4fbd1f55f59b1e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3576ef4b9f84948a0b4fbd1f55f59b1e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3576ef4b9f84948a0b4fbd1f55f59b1e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3576ef4b9f84948a0b4fbd1f55f59b1e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3576ef4b9f84948a0b4fbd1f55f59b1e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3576ef4b9f84948a0b4fbd1f55f59b1e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3576ef4b9f84948a0b4fbd1f55f59b1e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3576ef4b9f84948a0b4fbd1f55f59b1e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3576ef4b9f84948a0b4fbd1f55f59b1e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3576ef4b9f84948a0b4fbd1f55f59b1e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3576ef4b9f84948a0b4fbd1f55f59b1e.gif)
在上面的代码中, 为了美观,我还用了SCREEN对象的availWidth属性来计算LOADING层的位置,使其居中呢