數據量比較大的時候，頁面加載往往加載需要一些時間，而這個時候用戶如果只看到白屏的網頁會以後IE死了，爲了使自己的網站更加人性化。用javascript來實現頁面正在加載中的提示，先網頁面裏面寫入一個層，顯示加載框，然後等頁面結束後在body的onload中寫入事件，隱藏該對話框
#region "頁面加載中效果"
/// <summary>
/// 頁面加載中效果
/// </summary>
public static void initJavascript(System.Web.UI.Page page)
{
StringBuilder Builder = new StringBuilder();
Builder.Append("<style>");
Builder.Append("#loader_container {text-align:center; position:absolute; top:40%; width:100%; left: 0;}");
Builder.Append("#progress {height:5px; font-size:1px; width:1px; position:relative; top:1px; left:0px; background-color:#8894a8;}");
Builder.Append("#loader_bg {background-color:#e4e7eb; position:relative; top:8px; left:8px; height:7px; width:260px; font-size:1px;}");
Builder.Append("</style>");
Builder.Append("<div id=loader_container>");
Builder.Append("<div id=loader style='left: 300px; top: 150px;border-width: 3px; border-color: #B3D9D9; border-style:solid; position: absolute;z-index: 20000; background-color: #D1E9E9; cursor: wait; width: 300px; height: 75px;vertical-align: middle; padding: 10px 10px 10px 10px;'>");
Builder.Append("<div id=loader_bg><div id=progress> </div></div>");
Builder.Append("<div align='center' style='text-align:center;width:100%'> <br/>頁面加載中，請稍等...</div>");
Builder.Append("</div></div>");
Builder.Append(" <script language=JavaScript type=text/javascript>");
Builder.Append("var t_id = setInterval(animate,10);");
Builder.Append("var pos=0;var dir=2;var len=0;");
Builder.Append("function animate(){");
Builder.Append("var elem = document.getElementById('progress');");
Builder.Append("if(elem != null) {");
Builder.Append("if (pos==0) len += dir;");
Builder.Append("if (len>32 || pos>79) pos += dir;");
Builder.Append("if (pos>79) len -= dir;");
Builder.Append(" if (pos>79 && len==0) pos=0;");
Builder.Append("elem.style.left = pos;");
Builder.Append("elem.style.width = len;");
Builder.Append("}}");
Builder.Append("function remove_loading() {");
Builder.Append(" this.clearInterval(t_id);");
Builder.Append("var targelem = document.getElementById('loader_container');");
Builder.Append("targelem.style.display='none';");
Builder.Append("targelem.style.display='none';");
Builder.Append("}");
Builder.Append("</script>");
HttpContext.Current.Response.Flush();
//這裏在內容頁前加入事件，防止頁面原本的佈局亂了，用HttpContext.Current.Response.Write的方法會使頁面佈局亂了
page.ClientScript.RegisterClientScriptBlock(page.GetType(), "messagesss", Builder.ToString());
}
#endregion
調用方法很簡單，只需要在Page_Load()時間調用該方法：注意要寫在 if (!IsPostBack) 裏面
然後在<body οnlοad="remove_loading();">，這裏是用來隱藏DIV的；
#region "頁面加載中效果"
/// <summary>
/// 頁面加載中效果
/// </summary>
public static void initJavascript(System.Web.UI.Page page)
{
StringBuilder Builder = new StringBuilder();
Builder.Append("<style>");
Builder.Append("#loader_container {text-align:center; position:absolute; top:40%; width:100%; left: 0;}");
Builder.Append("#progress {height:5px; font-size:1px; width:1px; position:relative; top:1px; left:0px; background-color:#8894a8;}");
Builder.Append("#loader_bg {background-color:#e4e7eb; position:relative; top:8px; left:8px; height:7px; width:260px; font-size:1px;}");
Builder.Append("</style>");
Builder.Append("<div id=loader_container>");
Builder.Append("<div id=loader style='left: 300px; top: 150px;border-width: 3px; border-color: #B3D9D9; border-style:solid; position: absolute;z-index: 20000; background-color: #D1E9E9; cursor: wait; width: 300px; height: 75px;vertical-align: middle; padding: 10px 10px 10px 10px;'>");
Builder.Append("<div id=loader_bg><div id=progress> </div></div>");
Builder.Append("<div align='center' style='text-align:center;width:100%'> <br/>頁面加載中，請稍等...</div>");
Builder.Append("</div></div>");
Builder.Append(" <script language=JavaScript type=text/javascript>");
Builder.Append("var t_id = setInterval(animate,10);");
Builder.Append("var pos=0;var dir=2;var len=0;");
Builder.Append("function animate(){");
Builder.Append("var elem = document.getElementById('progress');");
Builder.Append("if(elem != null) {");
Builder.Append("if (pos==0) len += dir;");
Builder.Append("if (len>32 || pos>79) pos += dir;");
Builder.Append("if (pos>79) len -= dir;");
Builder.Append(" if (pos>79 && len==0) pos=0;");
Builder.Append("elem.style.left = pos;");
Builder.Append("elem.style.width = len;");
Builder.Append("}}");
Builder.Append("function remove_loading() {");
Builder.Append(" this.clearInterval(t_id);");
Builder.Append("var targelem = document.getElementById('loader_container');");
Builder.Append("targelem.style.display='none';");
Builder.Append("targelem.style.display='none';");
Builder.Append("}");
Builder.Append("</script>");
HttpContext.Current.Response.Flush();
//這裏在內容頁前加入事件，防止頁面原本的佈局亂了，用HttpContext.Current.Response.Write的方法會使頁面佈局亂了
page.ClientScript.RegisterClientScriptBlock(page.GetType(), "messagesss", Builder.ToString());
}
#endregion
調用方法很簡單，只需要在Page_Load()時間調用該方法：注意要寫在 if (!IsPostBack) 裏面
然後在<body οnlοad="remove_loading();">，這裏是用來隱藏DIV的；
是不是感覺很簡單呢？
來自: http://hi.baidu.com/huqing7002/blog/item/9292aed4ef575809a08bb752.html
