JQuery / Javascript does not activate gif image (Firefox only)

Question

First of all, I want to say that my code works in IE8 and Google Chrome. It is only in Firefox that I have a problem, tested it under Ubuntu and Win XP with the same problem with FF.

I am trying to display an ajaxloader gif as I refresh the page. At the very beginning, I use the jquery.ready () function to hide the div # update, which will display the image. When we click the update link, I show the div # update. My problem is that ajaxloader.gif does not rotate as if it should be a fix. But as mentioned, it works under chrome and IE.

Any idea why?

HTML:

<div id="refreshing">Refreshing</div> <a href="javascript: refreshPage();">Refresh</a> 

CSS

 #refreshing { font: 14px Verdana,Arial; color: #00264b; background: url("/med/base/img/ajax-loader-blue.gif") center no-repeat; } 

JavaScript:

 $(document).ready( function() { // hide the ajax loader $("#refreshing").hide(); } ); function refreshPage() { $("input").attr("disabled", "disabled"); $("select").attr("disabled", "disabled"); $("img").attr("onclick", ""); $("a").attr("href", "#"); window.location.href = window.location.href; $("#refreshing").toggle(); } 

Another thing is that firefox config image.animation_mode is set to normal. Plus, if I look under firebug, the image will be animated.

Thanks to everyone.

Answer 1

The reason it doesn't work is because Firefox stops all gif animations when the page is refreshed.

To do this, you must load the page (or, even better, only the updated parts) via ajax and overwrite the existing contents with new ones.

Answer 2

I finally managed to get him to work with coffee on a good morning on Wednesday.
Here is the code while Firefox stopped the GIF image to work and I used it to display
the user we are updating the page, although perhaps this was the way I was updating the wrong page.

So I'm looking for another way to refresh the page in Javascript where window.location.reload () is used;
I tried this, but there was only one problem with this method, my input, which I deactivated during the upgrade, was still disabled during the upgrade.

I went into the process of reactivating them in $ (document) .ready (function () {// activate input});
In the end, it worked fine, but I still found reactive odd.
Finally, I am looking for the difference between window.location.href = window.location.href and window.location.reload ()

Got it here -> The difference between window.location.href = window.location.href and window.location.reload ()

So, passing the true argument to the reload function, we say reload functions so as not to send the old POST data and get a new copy of the page from the server.
This is fully fixed by my problem.

I have not changed the HTML code nor CSS

 <!-- JS --> $(document).ready( function() { // hide the ajax loader $("#refreshing").hide(); } ); function refreshPage() { $("input").attr("disabled", "disabled"); $("select").attr("disabled", "disabled"); $("img").attr("onclick", ""); $("a").attr("href", "#"); window.location.reload(true); $("#refreshing").show(); } 

Thanks to everyone.

Answer 3

Another solution is to use the html5 canvas element for animated downloaders. It should still work fine when reloading the page.

This generator works very well and is compatible with the cross browser http://heartcode.robertpataki.com/canvasloader/