ASP.NET Animated Gifs and Long Running Processes

Shows a very easy-to-implement, cross-browser technique for displaying an animated progress gif while a long running method is going in your ASP.NET Page.

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'>
<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);

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.

By Peter Bromberg   Popularity  (24900 Views)