Js加载数据等候
日期：2014-05-16 浏览次数：20442 次
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">
<
----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">
<
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
