最近网页加载数据比较多,点击后给用户就是白板很不友好,想了很久找了些资料,在网页加载中显示等待画面给客户,页面加载完成自动隐藏等待效果。
在网页后台cs代码:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
ShowLoanding();
//.....
//你的数据加载代码
Thread.Sleep(1000);//线程停留1秒,也可以不要。
}
}
//显示加载进度
private void ShowLoanding()
{
Response.Write("<div style='position:absolute;z-index:600;width:expression(document.body.clientWidth);height:expression(document.body.clientHeight);background-color:#FFFFFF;text-align:center;padding-top:150px;' id='mydiv' >");
Response.Write("<img src='http://www.kuwant.com/common/images/waiting.gif'> Loading...");
Response.Write("</div>");
Response.Write("<script language=javascript>;");
Response.Write("function StartShowWait(){mydiv.style.visibility = 'visible'; ");
Response.Write("window.setInterval('ShowWait()',1000);}");
Response.Write("function HideWait(){mydiv.style.visibility = 'hidden';");
Response.Write("window.clearInterval();}");
Response.Write("StartShowWait();</script>");
Response.Flush();
}
在网页aspx代码<body>之后加入如下代码:(目的隐藏等待效果)
<body style="margin: 0px; padding: 0px" >
<script type="text/javascript">
HideWait();
</script>
等待效果就是在网页中间出现一个等待提示和动画,页面加载完成自动消失。当然动画图像和提示文字自己可以在代码中修改。