Jquery/Javascript not activating a gif image (Firefox only)

First thing to mention is that my code is working in IE8 and Google Chrome. It's only under Firefox that I have the problem, tested it under Ubuntu and Win XP same issue with FF.

I'm tryng to display an ajaxloader gif image while I am refreshing the page. At the very beginning I am using jquery .ready() function to hide the div#refreshing that would display the image. When we click on the refresh link then I show the div#refreshing. My problem is that the ajaxloader.gif is not turning like it should be it becomes to be a fix image. But as mentionned 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();
}

One more thing is that the firefox config image.animation_mode is set to normal. Plus if I look under firebug the image is animated.

thank you everyone.

---

The reason it doesn't work is because Firefox stops all gif animations on page refresh.

In order to make this work you should load the page (or better yet, only the updated parts) via ajax and overwrite the existing content with the new.

---

I finally manage to get it to work with a coffee on a good Wednesday morning.
Here is the code, while Firefox was stopping the GIF image to work and I was using it to display
the user that we were refreshing the page, I though it could be just the way I was refreshing the page that was incorrect.

So I search another way of refreshing the page in Javascript some where using window.location.reload();
I tried it, but there was only one problem with this method, my input that I desactivate while refreshing were still disabled on refresh.

I went in the process of reactivating them within a $(document).ready(function() { //activate input });
At the end it was working fine, but I still found the reactivating odd.
I finally search for the difference between window.location.href=window.location.href and window.location.reload()

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

So by passing the argument true to the reload function we tell the reload function to not post the old POST data and get a fresh copy of the page from the server.
That fixed completly my issue.

I didn't change the HTML code neither the 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();
}

Thank you everyone.

---

Another sollution is to use a html5 canvas element for animated loaders. It should still work fine on page reload.

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