关于loading图标的处理方法

很多采用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;

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/p/1541150.html