I am intending to show a Div with loading image during page post-backs to inform the user about a runing operation. I am using a simple javascript function that shows the div, when I call this JavaScript from an html input button (without postback), the div is appearing normally. But when I use it with a post-back button, (by setting its OnClientClick property), the div is appearing, but without the image unloaded (showing as a box with unloaded image). I am not able to figure where the problem is, I even tried adding the image as a hidden html control so that it is preloaded before the post-back, but with no prevail. Here is my aspx code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" language="javascript">
function PleaseWait(message) {
message = message ? message : PleaseWaitDefaultMessage;
var dsoctop = document.all ? window.document.body.scrollTop : window.pageYOffset;
var el = document.getElementById("PleaseWaitDiv");
el.style.top = (dsoctop + 100) + "px";
el.style.left = "0px";
el.innerHTML = "<div style='background-color:white;border: solid 0px black; width:100%;'><img src='" + WebSiteBaseURL + "Images/bigrotation2.gif' /><h3>" + message + "</h3></div>";
el.style.display = "";
}
</script>
<asp:Literal ID="InitLiteral" runat="server" EnableViewState="false"><script>var PleaseWaitDefaultMessage = "{0}"; var WebSiteBaseURL = "{1}"; </script>
</asp:Literal>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="PleaseWaitDiv" style="width: 100%; position: absolute; top: 0px; display: none;
text-align: center; z-index: 2; max-width: 1024px; min-width: 600px; height: 260px;
overflow: hidden; background: #fff; margin: 0 auto; left: 0; right: 0;">
</div>
<asp:Button ID="btnTestPleaseWait" runat="server" OnClientClick="PleaseWait();"
Text="Test Please wait with postback" onclick="btnTestPleaseWait_Click"
/>
<input type="button" onclick="PleaseWait();" value="Test Please wait no postback" />
</div>
</form>
</body>
</html>
and here is my code behind:
protected void Page_Load(object sender, EventArgs e)
{
InitLiteral.Text = string.Format(InitLiteral.Text, "Please Wait.....", Page.ResolveClientUrl("~/"));
}
protected void btnTestPleaseWait_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(5000);
}
I had same problem. I solved it by loading same image in another img tag with
style="dispaly:none"attribute. (Don't do visible="false")Img tag with display:none forces browser to load image when page is loaded.
I think the problem occurs because POST request gets sent before loading div comes into existence, therefore the GET request for IMG is sent immediately AFTER POST request is sent, and because server is busy processing POST request it takes time to respond because of which browser fails to display the image.
Hope this helps!