IE7 / IE8 et gifs animés figés

Question

Je suis à peu près sûr que c'est un vieux problème.

Voici comment rendre mon gif animé:

 <img id='loading' alt='loading' style="display: none; position:  
    relative; left:10px; top:2px;" src="<%= Url.Image("loading.gif") %>" />

Voici comment j'essaie désespérément de le montrer en ce moment:

showLoading: function(gifId, butId) {
        var n = gifId != undefined ? gifId : 'loading';
        var l = $('#' + n);

        //if browser is stupid
        if ('v' == '\v') {
            var s = l.attr('src');
            var x = document.getElementById(n);
            x.style.visibility = "visible";
            x.style.display = "inline";
            setTimeout("document.getElementById('" + n + "').src = '"+s+"';",  
                        100);
        } else {
            l.show();
        }
        if (butId != undefined)
            $('#' + butId).css('cursor', 'default').attr("disabled", true);
    },

Problème: Le gif animé semble figé, il n'y a pas d'animation

La chose la plus étrange est que sur une autre page, tout fonctionne comme un charme.

P.s. il est difficile de ne pas se plaindre à propos de IE ... argh ...

EDIT:

Enveloppé d'une portée:

  <span id='loading' style='display: none;
                position: relative; left: 0px; top: 2px;'>
                <img alt='loading' src="<%= Url.Image("loading.gif") %>" />
            </span>

changé de js en:

 if ('v' == '\v') {
            var f = function() {
                l.show();
                l.attr('src', l.attr('src'));
            };
            setTimeout(f, 100);
        } else {
            l.show();
        }

et mystiquement - cela fonctionne maintenant.

Answer 1

Je suis tombé sur cette fois. Si j'essayais d'utiliser JavaScript pour afficher un peu de poids lors du chargement alors que le navigateur passait à une page dont le chargement allait prendre un certain temps, IE n'animait pas le GIF. Je l'ai résolu en plaçant le throbber de chargement directement dans le code HTML (non inséré via JavaScript) dans un div caché:

<div id="pseudo-progress-area" style="display: none;">
    <h3>Please wait while we process your PayPal transaction...</h3>
    <p style="text-align: center;">
        <img src="/Media/Template/Images/LoadingProgressBar.gif" alt="" />
    </p>
</div>

et ensuite, en utilisant JavaScript pour basculer la visibilité de la div après un court délai (il s’agit d’une ancienne version de la bibliothèque Prototype, mais vous en avez l’idée):

<script type="text/javascript">    
    // We have to call this function via a setTimeout() or else IE7 won't
    // animate the GIF as the next page is loading.
    var fnHideConfirmation = function() {
        Element.hide( 'confirmation-area' );
        Element.show( 'pseudo-progress-area' );
    };    
</script>

Cette fonction est déclenchée dans le bouton d'envoi du formulaire:

<input 
    type="submit"
    class="button"
    name="SubmitConfirmation"
    value="Buy Now →"
    onclick="setTimeout(fnHideConfirmation, 50);" />

Donc, au lieu de retarder le changement d'attribut src, laissez-le tranquille et retardez simplement l'appel de votre fonction showLoading () entière. Bonne chance!

Answer 2

Spin.js fonctionne pour ce cas d'utilisation.

Answer 3

J'ai trouvé que la réponse acceptée était un peu complexe à comprendre ou à mettre en œuvre, mais j'avais le même problème en même temps,

J'ai eu le code HTML suivant

<div id="progress_wheel_div" align="center" style="height:100%; display:none; vertical-align: middle;">
    <img src="images/progress_wheel.gif" style="margin-top: 204px;"/>
    <p class='arbitText' style="font-weight: bold;">Processing, Please wait!</p>
</div>

et dans le script java je faisais cela

function onSubmit() {

   var divProgressWheel = document.getElementById("progress_wheel_div");
   divProgressWheel.style.display = "block";
}

Mais ce n'était pas une animation de fichier gif,

Solutions

Mise à jour de mon script java et mise en ligne comme suit

function onSubmit() {    
   setTimeout(showProgress, 500);
}

function showProgress() {

    var divProgressWheel = document.getElementById("progress_wheel_div");

    divProgressWheel.innerHTML = "<img src='images/progress_wheel.gif' style='margin-top: 204px;'/><p class='arbitText' style='font-weight: bold;'>Processing, Please wait!</p>";
    divProgressWheel.style.display = "block";
}

s'il vous plaît noter que divProgressWheel.innerHTML est identique à ce que j'avais en HTML. Par conséquent, nous pouvons supprimer du code HTML inutile, le code HTML modifié serait alors:

<div id="progress_wheel_div" align="center" style="height:100%; display:none; vertical-align: middle;">

    </div>