数据量比较大的时候,页面加载往往加载需要一些时间,而这个时候用户如果只看到白屏的网页会以后IE死了,为了使自己的网站更加人性化。用javascript来实现页面正在加载中的提示,先网页面里面写入一个层,显示加载框,然后等页面结束后在body的onload中写入事件,隐藏该对话框
调用方法很简单,只需要在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
// / <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的;
是不是感觉很简单呢?