js實現 【正在載入，請稍後….】 功能

做IM的時候，從Message Service器擷取使用者回應時間比較慢，這個時候，顯示一下動態提示效果，使用者會感覺安心些。

 

先發個效果，

還不會做gif動態圖，實際效果應該可以想到吧。。。。

 

好了，發源碼

 

<div id="lockScreen"><form name=loading><td align=center><p><font color=gray>正在載入，請稍候.......</font></p><p><input type=text name=chart size=46style="font-family:Arial; font-weight:bolder; color:gray;background-color:white; padding:0px; border-style:none;"><br> <input type=text name=percent size=46style="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.7function hideScreen() {var Element = document.getElementById('lockScreen');var Elements = document.getElementById('Screen');Element.style.display = 'none';Elements.style.display = '';}

 

這個只是實現簡單的功能，載入條的時間也是估算的，需要最佳化的地方還很多。有空再弄弄。。。。