IE7 / IE8 und gefrorener animierte Gifs

Question

Ich bin mir ziemlich sicher, dass dies ein altes Problem.

Das ist, wie ich meine animierten gif machen:

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

Dies ist, wie ich verzweifelt es im Moment zu zeigen versucht:

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

Problem: Animierte GIF erscheint eingefroren, gibt es keine Animation

Merkwürdigste ist, dass auf anderer Seite alles funktioniert wie ein Charme.

P. S. es ist schmerzhaft nicht über IE schimpfen ... argh ...

EDIT:

mit Spannweite umschlungen:

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

geändert js an:

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

und mystisch -. Es funktioniert jetzt

Answer 1

Ich lief in dieses ein Mal. Wenn ich versucht, JavaScript zu verwenden, um ein wenig Laden throbber zu zeigen, wie der Browser zu einer Seite bewegt, die eine Weile dauern würde zu laden, würde IE das GIF nicht animieren. Ich löste es durch das Laden throbber direkt in den HTML setzen (nicht über JavaScript eingefügt) in einem versteckten div:

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

und dann unter Verwendung von JavaScript, um die Sichtbarkeit des div nach einer kurzen Verzögerung umschalten (Dies ist eine ältere Version der Prototype-Bibliothek, aber Sie erhalten die Idee):

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

Diese Funktion ist in der Form Submit-Button ausgelöst wird:

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

Also anstatt das Attribut src Wechsel zu verzögern, lassen sie allein und nur den Anruf, um Ihre gesamte showLoading verzögern () Funktion. Viel Glück!

Answer 2

Spin.js arbeitet für diesen Anwendungsfall.

Answer 3

Ich habe ein wenig komplex akzeptierte Antwort zu verstehen oder zu implementieren aber ich hatte das gleiche Problem während dies zu tun,

Ich hatte folgende HTML

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

und in Java-Skript, das ich tat dies

function onSubmit() {

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

Aber es war nicht gif-Datei Animieren

Lösungen

meinen Java-Skript aktualisiert und machte es wie folgt

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";
}

Bitte beachten Sie, dass divProgressWheel.innerHTML ist das gleiche wie das, was ich in html hatte. Es gibt daher wir unnötige HTML entfernen können so modifiziert html wäre;

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

    </div>