how to stop animated GIF once report data is returned?

Question

Hi all,

I can't find the answer anywhere, and the particulars are driving me crazy. I've been tasked with updating an older application, using only javascript for client UI stuff. Reports used to be generated using PDF templates and manually looping through datasets and basically doing a form fill, then displaying the report. This has crashed the server many, many times.

I've since updated the app to use a report server, to help bring that report generation load offline. Every works fine, except that the animated GIF will not stop after the report returns. I use :

<span id="hiddenImg" style="display: none">
<img src="" id="animate" align="middle" alt="Loading"/>
</span>

Along with the following javascript:

function showDiv() 
  {
     document.getElementById('hiddenImg').style.display ="";  
     setTimeout('document.images["animate"].src="images/loading.gif"',100); 
  } 

Which works beautifully. On the server side, I have something like this:

Response.AddHeader("Content-Type", "application/" + format);
Response.AddHeader("Content-Disposition", "attachment;filename=" + "report." + format);
data = report.GetBytes(reportpath, rbFormat.SelectedValue);    
Response.BinaryWrite(data);
Response.End();

Where data is the byte stream return by the report server.

The only thing that is not working is that the animated GIF will continue to play even after the report is delivered and the user clicks on the open/save/cancel dialog. I suspected it was the Response.End(); call, but even eliminating the line and letting the server to continue to run does not alleviate this problem. It seems that the page is NOT performing any postback after the report data is received, and the .html source is obviously showing the GIF. If I manually postback, I lose the open/save/cancel dialog, and the user has no opportunity to display the content.

I'm at a loss here and I've been at this a couple of hours, any help is appreciated. Thanks is advance.

Answer 1

I am assuming that you already entertained the idea of having another version of the same GIF that is not animating, and swapping it when you want the animation to stop?

it would take no time given the code you already have, just set the .src to non animated version. In this case, you also get the benefit of completed status etc..

also, if you are calling set timeout, it is better to pass a function reference instead of code as string. that way you don't need browser engines to evaluate code at runtime which is much slower and harder to debug, and get better development support..

ex: setTimeout(animateGif, 100);

function animateGif() { document.images["animate"].src="images/loading.gif" } function stopAnimating() { document.images["animate"].src="images/loaded.gif" }