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'>
</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.

Hi Peter.

You said in the article "This uses the setTimeout method to make the DOM reset the src property of the image each 200ms."

That is not true.  That particular setTimeout() function call will make the DOM reset the src property only once (after waiting 200ms).  If it were to reset it each 200ms, you would be using the setInterval() function.

Hope this helps...

I was looking for a solution that was simple since all i wanted was some kind of entertainment while the wait. Your solution works great and i think is a very good idea, and i used it on a couple of buttons. But i got stuck when i applied it to a button that also had some client side validation controls attached to it. So what happens is that the image starts rolling but under it, its showing me validation errors on form fields (which is expected). So i had to remove this solution from other buttons as well since i did not want to use multiple methods for the same task.

But thanks, this im sure will be a handy idea else where.

I tried to do this on my own and ran into the problem of having the animation on the gif image freeze when the submit button was clicked.  I looked at a couple search results from Google and many people were suggesting the use of AJAX to solve this issue, but I needed something simpler, which is exactly what I found here.  I had all the pieces except the setTimeout line and when I added that it works great (even in IE 6). 

I've ran across some other posts by you and they are always helpful.  Thanks.