查看文章 |
ASP.NET页面加载中效果实现[原]
2009年05月31日 星期日 13:54
数据量比较大的时候，页面加载往往加载需要一些时间，而这个时候用户如果只看到白屏的网页会以后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()时间调用该方法： 然后在<body onload="remove_loading();">， 是不是感觉很简单呢？ |
最近读者：
