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

  • 相关阅读:
    14-快速排序
    linux上挂在windows的共享文件系统,大小写不敏感
    【mount】linux挂共享盘
    监控windows服务或者进程
    自定义时间间隔
    示例
    filebeat
    kafka
    文档碎片
    简单DOM操作
  • 原文地址:https://www.cnblogs.com/barryhong/p/1541150.html
Copyright © 2011-2022 走看看