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.

You could try to force a redraw of the loader.gif with something like `$('.loader').height()`. I've tried but I can't recreate your problem so I can't test it myself. But that usually works when firebug fixes the issue. — pstenstrm, Feb 22 '14 at 17:14
@pstenstrm, I should have mentioned.. I tried that, as well as dynamically adding new gifs with loader.gif?[currentdate] to prevent any caching. You say you can't recreate the problem? That is weird, I might have to add more info if needed. I'm using spin.js now as the solution so this question is really out of curiosity. — notAnonymousAnymore, Feb 22 '14 at 17:21
I wonder if Firefox is "pausing" the gif animation when the href changes, assuming that render cycles shouldn't be used for the page anymore, given that it's changing? Either way, it's weird and shouldn't happen. Can you show us the code responsible for rendering the loading gif? — Skone, Feb 25 '14 at 06:40

pstenstrm · Accepted Answer · 2014-02-22T21:45:37.050

4

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;

edited Feb 22 '14 at 21:45

answered Feb 22 '14 at 20:29

pstenstrm

6,339
5
41
62

Thanks for the effort! You didn't have to do all that. Problem with this approach is that some browsers block pop-ups. I considered doing it this way but in the end decided that it was bad practice. – notAnonymousAnymore Feb 22 '14 at 20:52
It's an interesting problem. I've edited my post with an alternative solution – pstenstrm Feb 22 '14 at 21:12
Well the iframe solution works just fine. Will probably go for it. Thanks again – notAnonymousAnymore Feb 23 '14 at 20:53

Aristos · Answer 2 · 2014-02-22T21:14:00.813

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.

Not possible to implement it like this because I can't set up the parameters before the click. For now I'm leaning towards pstenstrm's iframe solution — notAnonymousAnymore, Feb 23 '14 at 20:56
@user982119 One possible alternative -but I do not have try it- is to make the animation of the image using a timer and a series of css changes. One more is like this http://jsfiddle.net/simurai/CGmCe/ — Aristos, Feb 23 '14 at 21:03

score 0 · Answer 3 · answered Feb 25 '14 at 05:24

You could try an asynchronous approach on the click to allow the browser to parse the event queue after the click has initiated:

$('#lnkExportToPDF').click(function (e) {
    e.preventDefault();

    setTimout(function() {
        window.location.href = path + 'users/export/' + parm1 + '/' + parm2;
    }, 20);
});

score 0 · Answer 4 · answered Feb 25 '14 at 08:10

How about allowing the link to actually fire, but opening it in a new tab? That shouldn't interrupt anything about the gif, and is semantically fine, other than I guess it would leave a tab open. You could get rid of the content-disposition, and allow the browser /user to decide what to do with it though.

<a id="lnkExportToPDF" target="_blank">Export</a>

$('#lnkExportToPDF').click(function (e) {
    $(this).attr("href", path + 'users/export/' + parm1 + '/' + parm2);
});

score 0 · Answer 5 · answered Mar 12 '18 at 12:59

0

Instead of setting the window.location.href, you can use a form with method="get" and submit it. This form could either be coded into your HTML or created dynamically. See this Answer:

https://stackoverflow.com/a/21742326/1614903

answered Mar 12 '18 at 12:59

Holger Böhnke

971
11
17

score -2 · Answer 6 · answered Feb 09 '16 at 06:02

Here's my solution. It's faster and easier than any fix or workaround I've found. Just open the problem page in Chrome. Chrome has it's own problems, but this isn't one of them. Whenever I encounter a page full of gifs that causes Firefox to freeze, I just copy the URL, close the tab, open Chrome, and paste in the URL. I works every time! :o)

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

6 Answers6

Edit