当前位置: 代码迷 >> JavaScript >> Js加载数据等候
  详细解决方案

Js加载数据等候

热度:227   发布时间:2012-11-09 10:18:48.0
Js加载数据等待
----javaScript部分

<script>
var t_id = setInterval(animate,20);
var pos = 0;
var dir = 2;
var len = 0;
function animate() {
        var elem = document.getElementById('progress');
        if(elem != null) {
                if (pos == 0) len += dir;
                if (len > 32 || pos > 79) pos += dir;
                if (pos > 79) len -= dir;
                if (pos > 79 && len == 0) pos = 0;
                elem.style.left = pos;
                elem.style.width = len;
        }
}
function remove_loading() {
        this.clearInterval(t_id);
        var targelem = document.getElementById('loader_container');
        targelem.style.display = 'none';
        targelem.style.visibility = 'hidden';
}

</script>

------css部分

#loader_container {
        text-align: center;
        position: absolute;
        top: 40%;
        width: 100%;
        left: 0;
}
#loader {
        font-family: Tahoma, Helvetica, sans;
        font-size: 11.5px;
        color: #000000;
        background-color: #FFFFFF;
        padding: 10px 0 16px 0;
        margin: 0 auto;
        display: block;
        width: 130px;
        border: 1px solid #5a667b;
        text-align: left;
        z-index: 2;
}
#progress {
        height: 5px;
        font-size: 1px;
        width: 1px;
        position: relative;
        top: 1px;
        left: 0px;
        background-color: #8894a8
}
#loader_bg {
        background-color: #e4e7eb;
        position: relative;
        top: 8px;
        left: 8px;
        height: 7px;
        width: 113px;
        font-size: 1px
}

-------jsp部分

<body onload="remove_loading();" bgcolor="black">
<div id="loader_container">
    <div id="loader">
       <div align="center">
          数据正在加载中 ...稍候
       </div>
       <div id="loader_bg">
          <div id="progress">
          </div>
       </div>
     </div>
</div>
<iframe id="framePage" name="framePage" src="xx.do"  height="100%" width="100%" scrolling="auto" frameborder="1" border="1">
</body>
  相关解决方案