js实现 【正在载入，请稍后....】 功能

做IM的时候，从消息服务器获取用户响应时间比较慢，这个时候，显示一下动态的提示效果，用户会感觉安心些。

 

先发个效果截图，

还不会做gif动态图，实际效果应该可以想到吧。。。。

 

好了，发源码

 

<div id="lockScreen">
		<form name=loading>
			<td align=center>
				<p>
					<font color=gray>正在载入，请稍候.......</font>
				</p>
				<p>
					<input type=text name=chart size=46
						style="font-family:Arial; 
font-weight:bolder; color:gray;
background-color:white; padding:0px; border-style:none;">
					<br> <input type=text name=percent size=46
						style="font-family:Arial; 
color:gray; text-align:center; 
border-width:medium; border-style:none;">
					<script>
						var bar = 0;
						var line = "||";
						var amount = "||";
						count();
						function count() {
							bar = bar + 2;
							amount = amount + line;
							document.loading.chart.value = amount;
							document.loading.percent.value = bar + "%";
							if (bar < 99) {
								setTimeout("count()", 80);
							} else {
								hideScreen();
							}
						}
					</script>
				</p>
			</td>
		</form>
	</div>
	
	<div id="Screen" style="width: auto;">
		<div id="roster" class="roster"></div>
	</div>

两个区域，id分别为lockScreen和Screen，开始时候显示lockScreen，之后加载完毕显示Sreen内容。

 

// lockScreen dml@2012.9.7
function hideScreen() {
	var Element = document.getElementById('lockScreen');
	var Elements = document.getElementById('Screen');
	Element.style.display = 'none';
	Elements.style.display = '';
}

 

这个只是实现简单的功能，加载条的时间也是估算的，需要优化的地方还很多。有空再弄弄。。。。