window.location.href causing animated gif loader to freeze in Firefox

Question

I have a link which when clicked redirects the user to the same page except with additional parameters:

<a id="lnkExportToPDF" href="javascript:void(0)">Export</a>

$('#lnkExportToPDF').click(function (e) {
    e.preventDefault();
    window.location.href = path + 'users/export/' + parm1 + '/' + parm2;
});

On the server side I handle it by checking for "export" in the request path, and if it's found I write a PDF file to the response:

System.Web.HttpResponse response = System.Web.HttpContext.Current.Response;
response.Clear();
response.AddHeader("Content-Type", "application/pdf");
response.AddHeader("Content-Disposition", String.Format("attachment; filename=" + filename + ".pdf; size={0}", buffer.Length.ToString()));
response.BinaryWrite(buffer);
response.End();

Everything works and the user can download the file, but any additional actions by the user that uses the loader.gif which is on the page shows an unanimated loader.

What could be causing this to happen? Is there any way to refresh/reload the page/javascript after the response is complete?

edit: I've found a useful JS tool here: http://fgnass.github.io/spin.js/ but I'd prefer not to use it unless absolutely necessary

edit2: I also tried using a generic handler (.ashx) to handle the request (ie. changing the href to point to the handler), but as soon as the page redirects and the file is written, same thing happens

edit3: The problem is only happening in Firefox so far. I've tried Chrome and IE and the gif stays animated in those browsers. (latest versions of each)

edit4: If I use an iframe with the src as the image it solves the issue, but it's very hacky and the style of it looks different across all browsers with regards to centering/padding/margins.

edit5: Yeah. If I inspect the frozen gif with firebug it magically unfreezes itself.

Answer 1

I managed to recreate the problem in firefox and I really can't find a way to "unfreeze" the gif. When I added a completely different file after a download and that too was frozen I gave up with that approach.

What I did instead was to test different ways to trigger the download. I found no window.location solutions that worked, what did work though was this:

window.open(path + 'users/export/' + parm1 + '/' + parm2);

window.open opens a new tab and downloads the file through that instead of the current tab as window.location does. It will return to the current tab as soon as the download starts.

Edit

You could also use a hidden iframe:

var iframe = document.getElementById('iframe');
iframe.src = path + 'users/export/' + parm1 + '/' + parm2;

Answer 2

I confirm that I have the same behavior with firefox, and the first that come to my mind is to use SetTimeOut but still the same behavior, so on firefox for some reason, this window.location.href is also call the "Stop" on browser, that this cause the gif animation to stop.

So what I found and you can solve your issue, that this is not happends on simple links.

And if you change your code you can archive the same effect with a link.

So change this

$('#lnkExportToPDF').click(function (e) {
    e.preventDefault();
    window.location.href = "page.aspx";
});

to something like this

$('#lnkExportToPDF').attr("href", "page.aspx");

and you have the same results, and gif will still moving.

Here is the fiddle test.
On the test I add to move to paypal, because is slow moving and you can see the animation stop or not, also pp not let show on iframe, so on example you stay on example and not load the page.

When you click on this example, the issue is appears only on firefox !

http://jsfiddle.net/hn7S9/4/

One other issue that I think is that if you need to make your parametres to the next page on click, you probably need to redesign that and fix them before your click.
This is possible because for sure is not depends on the last click on the dynamic create link. So make the link with their parametres before the click.