IE7 / IE8 y gifs animados congelados

Question

Estoy bastante seguro de que este es un viejo problema.

Así es como renderizo mi gif animado:

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

Así es como estoy intentando mostrarlo desesperadamente en este momento:

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

Problema: El gif animado aparece congelado, no hay animación

Lo más extraño es que en otra página todo funciona como un encanto.

P.s. es doloroso no despotricar sobre IE ... argh ...

EDITAR:

Envuelto con lapso:

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

cambió js a:

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

y místicamente, ahora funciona.

Answer 1

Me encontré con esto una vez. Si traté de usar JavaScript para mostrar un pequeño acelerador de carga mientras el navegador se movía a una página que tardaría un tiempo en cargar, IE no animaría el GIF. Lo resolví colocando el indicador de carga directamente en el HTML (no insertado a través de JavaScript) en un div oculto:

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

y luego usar JavaScript para alternar la visibilidad del div después de un breve retraso (es decir, usar una versión anterior de la biblioteca de Prototipos, pero tienes la idea):

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

Esa función se activa en el botón de envío del formulario:

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

Entonces, en lugar de retrasar el cambio del atributo src, déjelo solo y demore la llamada a toda su función showLoading (). Buena suerte!

Answer 2

Spin.js funciona para este caso de uso.

Answer 3

La respuesta aceptada me pareció un poco compleja de entender o implementar, pero tuve el mismo problema al hacer esto,

Tuve el siguiente 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>

y en Java script estaba haciendo esto

function onSubmit() {

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

Pero no estaba animando el archivo gif,

Soluciones

Actualicé mi script java y lo hice como seguir

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

tenga en cuenta que divProgressWheel.innerHTML es el mismo que tenía en html. Por lo tanto, podemos eliminar html innecesarios para que html modificado sea;

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

    </div>