Jquery/Javascript ne pas activer une image gif (Firefox uniquement)

Question

La première chose à mentionner est que mon code fonctionne dans IE8 et Google Chrome. C'est seulement sous Firefox que j'ai le problème, testé sous Ubuntu et Win XP même problème avec FF.

Je suis tryng pour afficher une image ajaxloader gif pendant que j'actualise la page. Au tout début, j'utilise la fonction jquery .ready() pour masquer le rafraîchissement div # qui afficherait l'image. Lorsque nous cliquons sur le lien d'actualisation, je montre le rafraîchissement de div #. Mon problème est que le ajaxloader.gif ne tourne pas comme il devrait être cela devient une image fixe. Mais comme mentionné, cela fonctionne sous chrome et IE.

Une idée pourquoi?

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(); 
} 

Une chose est que le image.animation_mode config firefox est réglé à la normale. De plus, si je regarde sous firebug, l'image est animée.

merci à tous.

Answer 1

La raison pour laquelle cela ne fonctionne pas est que Firefox arrête toutes les animations gif lors de l'actualisation de la page. Pour faire ce travail, vous devez charger la page (ou mieux encore, seulement les parties mises à jour) via ajax et remplacer le contenu existant par le nouveau.

Answer 2

Je réussis finalement à le faire fonctionner avec un café un bon mercredi matin.
Voici le code, tandis que Firefox arrêtait l'image GIF pour fonctionner et je l'utilisais pour afficher
l'utilisateur que nous étions en train d'actualiser la page, je pensais que c'était juste la façon dont j'actualisais la page qui était incorrecte .

Donc, je cherche une autre façon de rafraîchir la page en Javascript où utiliser window.location.reload();
Je l'ai essayé, mais il y avait un seul problème avec cette méthode, mon entrée que je désactivais pendant l'actualisation était toujours désactivée à l'actualisation.

Je suis allé dans le processus de les réactiver dans un $ (document) .ready (function() {// activate input}); A la fin ça marchait bien, mais j'ai quand même trouvé l'étrange réactivant.
Je cherche enfin la différence entre window.location.href = window.location.href et window.location.reload()

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

Ainsi, en passant l'argument fidèle à la fonction de rechargement, nous disons à la fonction de rechargement de ne pas publier les anciennes données POST et d'obtenir une nouvelle copie de la page à partir du serveur.
Cela a complètement résolu mon problème.

Je n'ai pas changé le code HTML ni le 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(); 
} 

Merci à tous.

Answer 3

Une autre solution consiste à utiliser un élément canvas html5 pour les chargeurs animés. Cela devrait fonctionner correctement sur le rechargement de la page.

Ce générateur fonctionne très bien et est navigateur compatible cross http://heartcode.robertpataki.com/canvasloader/