Showing a "Please wait..." message for slow loading pages

This is the simplest and most elegant solution I found to this problem


http://www.experts-exchange.com/Programming/Languages/.NET/ASP.NET/Q_21545558.html


I like the approach where you have an invisible DIV tag that contains your "wait image". Upon page submission/postback, you show that DIV tag client-side--before the postback occurs.

Here are steps:
1) Create your DIV tag. For example (this uses an hourglass image that you can substitute with your own image file in place of hourglass.gif):

<div id="waitmessage" style="Z-INDEX:-1; LEFT:0px; VISIBILITY:hidden; WIDTH:300px; POSITION:absolute; TOP:200px; HEIGHT:100px">
<table border="2" style="BORDER-COLLAPSE: collapse" width="300" height="100" cellspacing="1"
bgcolor="#ffffff" bordercolor="#000000">
<tr>
<td align="right" bordercolor="#ffffff">
<asp:Image id="imgHourglass" runat="server" ImageUrl="../Controls/WaitMessage/images/hourglass.gif"></asp:Image>
</td>
<td align="center" class="bblrg" width="239">Your submission<br>
is being processed.<br>
<br>
Please wait a moment...</td>
</tr>
</table>
</div>

2) Add code to your the ASP.NET page's PreRender function:

private void Feedback_PreRender(object sender, System.EventArgs e)
{

// this requires a DIV tag called "waitmessage" in order to work
System.Web.UI.Page p = this;
p.RegisterOnSubmitStatement("OnSubmit",
"javascript:showWaitMessage();");
p.RegisterClientScriptBlock("showWaitMessage",
"<script>\n" +
"function showWaitMessage()\n" +
"{\n" +
"var IW = window.innerWidth ? window.innerWidth : document.body.clientWidth;\n" +
"var IH = self.outerheight;\n" +
"self.scrollTo(0, 0);\n" +
"if( document.all )\n" +
"{\n" +
" document.all.waitmessage.style.left=(IW-300)/2;\n" +
" //document.all.waitmessage.style.top=IH-100;//(IH-100)/2;\n" +
" document.all.waitmessage.style.visibility=\"visible\";\n" +
" document.all.waitmessage.style.zIndex=99;\n" +
"}\n" +
"else if( document.getElementById )\n" +
"{\n" +
" document.getElementById(\"waitmessage\").style.left=(IW-300)/2;\n" +
" document.getElementById(\"waitmessage\").style.visibility=\"visible\";\n" +
" document.getElementById(\"waitmessage\").style.zIndex=99;\n" +
"}\n" +
"else\n" +
"{\n" +
" document.waitmessage.left=(IW-300)/2;\n" +
" document.waitmessage.visibility=\"show\";\n" +
" document.waitmessage.zIndex=99;\n" +
"}\n" +
"}\n" +
"</script>\n");

}

Credits to its author!!