在载入新页面时产生LOADING效果

转载 2007年09月14日 10:31:00
在页面中插入一个隐藏的层,用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层的位置,使其居中呢  

几种常见的载入中、loading页面效果的实现方法总结

原创被我打死了,我就是原创。 网页加载过程中提示“载入中…”,特别是使用动画效果,可以一个“等待”的温馨提示,用户体验很不错。 先说最简单的第一种,原理就是,在网页载入时在页面最中间打入一...

页面loading效果之一

  • 2010年02月03日 09:41
  • 1KB
  • 下载

JS实现页面加载完毕之前loading提示效果

一、JS代码: //获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, ...

页面Loading效果

  • 2012年08月03日 13:18
  • 48KB
  • 下载

页面加载过程中的等待查询loading效果

实现查询等待:正在查询中,请稍后... html代码: 正在查询,请稍等... .query_hint{ border:5px solid #939393; width:...

jQuery Easy UI 实现页面的Loading效果(类似于Android的ProgressDialog)

关于使用easyui实现网页加载等待的loading效果。

CSS实现的loading页面等待效果

有些页面加载起来比较慢,为了加强用户体验效果,所以一般都会做一个页面加载等待的提示,页面加载完成后消失。下面是用CSS实现的一个简单的页面加载等待效果,大家可以参考: 无标题文档 .loa...

CSS实现的loading页面等待效果

有些页面加载起来比较慢,为了加强用户体验效果,所以一般都会做一个页面加载等待的提示,页面加载完成后消失。下面是用CSS实现的一个简单的页面加载等待效果,大家可以参考: [html] vi...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:在载入新页面时产生LOADING效果
举报原因:
原因补充:

(最多只允许输入30个字)