关于loading图标的处理方法

本文介绍了一种在页面加载过程中使用JavaScript显示LOADING图标的方法,以提高用户体验。具体步骤包括在页面开始时添加遮罩层和加载图标,并在加载完成后移除。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

很多采用JS方式的RAI页面,装载时间比较长,为了解决等待的问题,页面点开的时候实现显示一个LOADING图标,然后加载数据之类的,最后全部加载完成了,取消LOADING图标。

解决方法:

1.在页面开始的时候

增加两个层:

<div id="loading-mask" style=""></div>
<div id="loading">
  <div class="loading-indicator"><img src="resources/extanim32.gif" width="32" height="32" style="margin-right:8px;" align="absmiddle"/>Loading...</div>
</div>

loading-mask是一个盖住所有页面元素的层,z-index设置成很高,就可以掩盖所有层。

loading层是显示一个LOADING的图标。

#loading-mask {

background-color:white;

height:100%;

left:0;

position:absolute;

top:0;

width:100%;

z-index:20000;

}

 

#loading {

height:auto;

left:45%;

padding:2px;

position:absolute;

top:40%;

z-index:20001;

}

 

2.在所有页面都装载完成以后,释放这两个层

    setTimeout(function(){
        Ext.get('loading').remove();
        Ext.get('loading-mask').fadeOut({remove:true});
    }, 250);

转载于:https://www.cnblogs.com/barryhong/archive/2009/08/07/1541150.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值