JqueryJavascript not activating a gif image (Firefox only) - Stack Overflow

admin管理员组

文章数量:1318983

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 bees 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.

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 bees 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.

• javascript
• jquery
• gif

Share Improve this question Follow edited Apr 5, 2011 at 23:30 Šime Vidas 186k6565 gold badges288288 silver badges391391 bronze badges asked Apr 5, 2011 at 20:45 DoRivardDoRivard 83233 gold badges1616 silver badges2828 bronze badges 2

• Just a guess but maybe it's not displaying because the page is unloading before it gets to the code, try putting the "window.location.href = ..." inside a call back of the toggle method call that way the image will be displayed before reloading the page. – JaredMcAteer Commented Apr 5, 2011 at 20:48
• Tried $("#refreshing").toggle(function() {window.location.href = window.location.href;}); but it does the same thing. – DoRivard Commented Apr 5, 2011 at 20:51

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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 pletly 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 patible http://heartcode.robertpataki./canvasloader/

本文标签： JqueryJavascript not activating a gif image (Firefox only)Stack Overflow