关于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;

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);