在载入新页面时产生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效果

很简单实用哟 在页面中插入一个隐藏的层,用CSS为其指定各种属性 DIV id="Progress" style="Z-INDEX: 10; FILTER: alpha(opacity=100); L...
  • lubosun
  • lubosun
  • 2007年06月12日 17:00
  • 905

在载入新页面时产生LOADING效果?看下面吧

很简单实用哟 在页面中插入一个隐藏的层,用CSS为其指定各种属性 DIV id="Progress" style="Z-INDEX: 10; FILTER: alpha(opacity=100); L...
  • jelink
  • jelink
  • 2006年11月05日 15:09
  • 3352

js网页Loading效果,让页面加载完再显示

提供一个思路:  顶部放一个 position:fixed 的 loading 遮罩,覆盖整个页面。 然后用 JS 在 onload 事件里把这个遮罩隐藏掉就行了。 Test   .loadi...
  • u012767607
  • u012767607
  • 2016年09月12日 10:42
  • 3792

分享web前端七款HTML5 Loading动画特效集锦

以前我们大部分的Loading动画都是利用gif图片实现的,这种图片实现Loading动画的方法虽然也很不错,但是作为HTML5开发者来说,如果能利用HTML5和CSS3实现这些超酷的Loading动...
  • yanghaonan7758
  • yanghaonan7758
  • 2017年05月02日 09:13
  • 549

实现图片加载前显示loading之类

#loader{ visibility:hidden; } Loading...
  • HackProgramer
  • HackProgramer
  • 2014年05月22日 18:01
  • 1018

jquery ajax之loading效果

巧用Ajax的beforeSend 提高用户体验 jQuery是经常使用的一个开源js框架,其中的$.ajax请求中有一个beforeSend方法,用于在向服务器发送请求前执行一些动作。 具体可参考...
  • u010081689
  • u010081689
  • 2016年01月19日 13:50
  • 631

图片加载显示loading图的疑惑解决

http://fgm.cc/learn/lesson2/11.html 遇到的问题var img = new Image(); img.src = oImg[0].src = this.src.rep...
  • sqfbeijing
  • sqfbeijing
  • 2015年12月09日 18:25
  • 282

LaunchAnywhere载入Java VM时windows出现错误:2以及216

背景很久没碰到过类似问题了。都跟JavaVM有关。边解决边学。 英文版的错误提示: LaunchAnywhere Error: Windows error 2 occured while...
  • stereohomology
  • stereohomology
  • 2017年02月03日 15:25
  • 7905

网页加载过渡效果详解

你只需更改transition的值就可以了以下就是transition相对应的值0 矩形向内收缩 1 矩形向外扩张 2 圆形向内收缩 3 圆形向外扩张 4 由下向上滚屏 5 由上向下滚屏 6 由左至右...
  • shunzi110
  • shunzi110
  • 2007年03月06日 09:01
  • 846

页面加载时遮罩效果

页面加载时遮罩效果                              /*opacity是设置遮罩透明度的,可以自己调节*/            #loading{position:...
  • cherishSpring
  • cherishSpring
  • 2016年10月19日 15:40
  • 2416
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:在载入新页面时产生LOADING效果
举报原因:
原因补充:

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