zoukankan      html  css  js  c++  java
  • 关于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);

  • 相关阅读:
    Contest
    【HDU2224】The shortest path(双调欧几里得dp)
    UVa400.Unix ls
    一些脚本
    省赛总结
    一些事
    一些笔记
    CSU 1526: Beam me out!
    以后可能用到的命令
    Codeforces Round #297 (Div. 2)
  • 原文地址:https://www.cnblogs.com/barryhong/p/1541150.html
Copyright © 2011-2022 走看看