With all the new "AJAX" (Remote Scripting) and clientcallback methods available
to ASP.NET developers, it has become a lot easier to refresh the DOM of a running
page without a reload. However, oftentimes you do not want all the overhead of
all that AJAX baggage, you just want to display an animated gif after the user
clicks the button and have it display and animate until the page reloads, in
order to display some sort of visual indication to the user that something is
happening.
The problem is, at least in Internet Explorer, this doesn't work at all as advertised
and we need to resort to some tricks to make it work in a true cross-browser
fashion. This wasn't lost on fellow MVP Rick Strahl, and he has a whole blog page with lots of user comments on the subject.
The method I present here is the one that works best for me, and rather than launch
into a big explanation, I think it would be easier just to show the code, as
it is not very complex.
The key part of the HTML elements is as follows:
<span id='myHiddenDiv' style='display: none'>
<img src='' id='myAnimatedImage' align='absmiddle'>
</span>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" OnClientClick="showDiv();"
Text="Search" />
We have a hidden span (it could be a div, if you want it on a new line), and inside
this span is our img tag. Next, in the OnClientClick handler of our button, we
call the "showDiv();" client script function which looks like so:
<script language='javascript'>
function showDiv()
{
document.getElementById('myHiddenDiv').style.display ="";
setTimeout('document.images["myAnimatedImage"].src="work.gif"', 200);
}
</script>
This uses the setTimeout method to make the DOM reset the src property of the image after
200ms. The result is that when you press your button that kicks off your long
- running method, the image will show and continue animating until the postback
returns and the page is reloaded, whereupon the image disappears -- exactly the
behavior we want.
The download below is a "script only" single ASPX page that also includes
an animated gif to use, so if you unzip this into your wwwroot folder and request
it with http://localhost/workingimage.aspx you can test it out with no configuration,
not even the need for a Visual Studio solution / project.
Thanks to Rick for featuring this information and also to the commenters who posted
so much additional information. Of course, you can use this same technique with
other scripting languages and platforms, all you need to do is remove the OnClientClick
ASP.NET attribute and instead, put an onlick="showDiv();" attribute
right into your button's HTML code.
Download the zip file containing the example page and gif.