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

Question

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.

Answer 1

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.