GIF animado en IE deteniéndose

¿Alguien conoce una solución para hacer que los GIF animados sigan siendo animados después de hacer clic en un enlace o enviar un formulario en la página en la que se encuentra en IE? Esto funciona bien en otros navegadores.

Gracias.

La solución aceptada no funcionó para mí.

Después de investigar un poco más, encontré esta solución , y realmente funciona.

Aquí está la esencia:

function showProgress() {
    var pb = document.getElementById("progressBar");
    pb.innerHTML = '<img src="./progress-bar.gif" width="200" height ="40"/>';
    pb.style.display = '';
}

y en tu html:

<input type="submit" value="Submit" onclick="showProgress()" />
<div id="progressBar" style="display: none;">
    <img src="./progress-bar.gif" width="200" height ="40"/>
</div>

Entonces, cuando se envía el formulario, <img/>se inserta la etiqueta y, por alguna razón, no se ve afectada por los problemas de animación de ie.

Probado en Firefox, ie6, ie7 y ie8.

pregunta anterior, pero publicando esto para otros googlers:

Spin.js FUNCIONA para este caso de uso: http://fgnass.github.com/spin.js/

IE asume que hacer clic en un enlace anuncia una nueva navegación donde se reemplazará el contenido de la página actual. Como parte del proceso de preparación, detiene el código que anima los GIF. Dudo que haya algo que pueda hacer al respecto (a menos que no esté navegando, en cuyo caso use return false en el evento onclick).

Aquí hay un jsFiddle que funciona bien en el envío de formularios con method = "post". La ruleta se agrega en el evento de envío de formulario.

$("form").bind("submit", onFormSubmit);

function onFormSubmit() {
    setTimeout(showSpinner, 1);
}

function showSpinner() {
    $("body").append($('<img id="spinner" src="spinner.gif" alt="Spinner" />'));
}

Vea el código jsFiddle aquí

Pruébelo en su navegador IE aquí

Encontré esta publicación y, aunque ya ha sido respondida, sentí que debería publicar información que me ayudó con este problema específico de IE 10 y que podría ayudar a otros que lleguen a esta publicación con un problema similar.

Me desconcertó cómo los gifs animados simplemente no se mostraban en IE 10 y luego encontré esta joya.

Tools→ Internet Options→ Advanced→ MultiMedia→Play animations in webpages

espero que esto ayude.

Encontré este problema al intentar mostrar un gif de carga mientras se procesaba el envío de un formulario. Tenía una capa adicional de diversión en el sentido de que el mismo onsubmit tenía que ejecutar un validador para asegurarse de que el formulario fuera correcto. Como todos los demás (en cada publicación de formulario IE / gif en Internet) no pude hacer que la ruleta de carga "girara" en IE (y, en mi caso, validar / enviar el formulario). Mientras busca los consejos en http://www.west-wind.com , encontré una publicación de ev13wt que sugería que el problema era "... que IE no representa la imagen como animada porque era invisible cuando se representaba. " Eso tiene sentido. Su solución:

Deje en blanco donde iría el gif y use JavaScript para establecer la fuente en la función onsubmit - document.getElementById ('loadingGif'). Src = "ruta al archivo gif".

Así es como lo implementé:

<script type="text/javascript">
    function validateForm(form) {

        if (isNotEmptyid(form.A)) {
            if (isLen4(form.B)) {        
                if (isNotEmptydt(form.C)) {
                    if (isNumber(form.D)) {        
                        if (isLen6(form.E)){
                            if (isNotEmptynum(form.F)) {
                                if (isLen5(form.G)){
                                    document.getElementById('tabs').style.display = "none";                
                                    document.getElementById('dvloader').style.display = "block";                
                                    document.getElementById('loadingGif').src = "/images/ajax-loader.gif"; 
                                    return true;
                                }
                            }
                        }
                    }
                }
            }
        }
        return false;   
    }               
</script>

<form name="payo" action="process" method="post" onsubmit="return validateForm(this)">
    <!-- FORM INPUTS... -->
    <input type="submit" name="submit" value=" Authorize ">

    <div style="display:none" id="dvloader">  
        <img id="loadingGif" src="" alt="Animated Image that appears during processing of document." />
        Working... this process may take several minutes.
    </div>

</form>

¡Esto funcionó bien para mí en todos los navegadores!

Esto es lo que hice. Todo lo que tienes que hacer es dividir tu GIF para decir 10 imágenes (en este caso comencé con 01.gify terminé con 10.gif) y especificar el directorio donde las guardas.

HTML:

<div id="tester"></div>

JavaScript:

function pad2(number) {   
    return (number < 10 ? '0' : '') + number 
}
var 
    dirURL = 'path/to/your/images/folder',
    ajaxLoader = document.createElement('img');
ajaxLoader.className = 'ajax-image-loader';
jQuery(document).ready(function(){
    jQuery('#tester').append(ajaxLoader);
    set(0);
});
function set(i) {
    if (i > 10) i = 1;    
    img.src = dirURL + pad2(i) + '.gif';
    setTimeout(function() {
        set(++i);
    }, 100);    
}

Este método funciona con IE7, IE8 e IE9 (aunque para IE9 puedes usarlo spin.js). NOTA: No he probado esto en IE6 ya que no tengo una máquina que ejecute un navegador de los años 60, aunque el método es tan simple que probablemente funcione incluso en IE6 y versiones anteriores.

En relación con esto, tuve que encontrar una solución en la que los gifs animados se usaran como imagen de fondo para garantizar que el estilo se mantuviera en la hoja de estilo. Una solución similar funcionó para mí allí también ... mi script fue algo como esto (estoy usando jQuery para facilitar la obtención del estilo de fondo calculado; cómo hacerlo sin jQuery es un tema para otra publicación):

var spinner = <give me a spinner element>

window.onbeforeunload = function() {
  bg_image = $(spinner).css('background-image');
  spinner.style.backgroundImage = 'none';
  spinner.style.backgroundImage = bg_image;
}

[EDITAR] Con un poco más de pruebas, me acabo de dar cuenta de que esto no funciona con imágenes de fondo en IE8. He estado intentando todo lo que se me ocurre para que IE8 renderice una animación gif mientras cargaba una página, pero no parece posible en este momento.

Sobre la base de la respuesta de @danfolkes, esto funcionó para mí en IE 8 y ASP.NET MVC3.

En nuestro _Layout.cshtml

<body style="min-width: 800px">
    <div id="progress">
        <div style="min-height: 200px">
        </div>
        <div id="throbber">
            <img src="..\..\Content\ajax-loader.gif" alt="Progress" style="display: block;
                margin-left: auto; margin-right: auto" />
        </div>
    </div>
    <div id="main">

<<< contenido aquí >>> ...

<script type="text/javascript" language="javascript">
    function ShowThrobber() {
        $('#main').hide();
        $('#progress').show();
        // Work around IE bug which freezes gifs
        if (navigator.appName == 'Microsoft Internet Explorer') {
            // Work around IE bug which freezes gifs
            $("#throbber").html('<img src="../../Content/ajax-loader.gif" alt="Progress" style="display: block; margin-left: auto; margin-right: auto"/>');
         }
</script>
<script type="text/javascript" language="javascript">
    function HideThrobber() {
        $('#main').show();
        $('#progress').hide();
    }
</script>
<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        HideThrobber();
    });
</script>

Y en nuestros enlaces de navegación:

<input type="submit" value="Finish" class="submit-link" onclick="ShowThrobber()"/>

o

@Html.ActionLink("DoSometthing", "MyController", new { Model.SomeProperty }, new { onclick = "ShowThrobber()" })

Encontré esta solución en http://timexwebdev.blogspot.com/2009/11/html-postback-freezes-animated-gifs.html y ¡FUNCIONA! Simplemente vuelva a cargar la imagen antes de configurarla como visible. Llame a la siguiente función de Javascript desde el clic de su botón:

function showLoader()
{
   //*** Reload the image for IE ***
   document.getElementById('loader').src='./images/loader.gif';
   //*** Let's make the image visible ***
   document.getElementById('loader').style.visibility = 'visible';
}

Me doy cuenta de que esta es una pregunta antigua y que a estas alturas los carteles originales han encontrado una solución que funciona para ellos, pero encontré este problema y descubrí que las etiquetas VML no son víctimas de este error de IE. Los GIF animados aún se mueven durante la descarga de la página cuando se colocan en el navegador IE mediante etiquetas VML.

Observe que detecté VML primero antes de tomar la decisión de usar etiquetas VML, por lo que esto funciona en FireFox y otros navegadores que usan el comportamiento GIF animado normal.

Así es como resolví esto.

<input class="myExitButton" type="button" value="Click me"  />

<div class="loadingNextPage" style="display:none" >
    <span style="left:-24px; POSITION: relative; WIDTH: 48px; DISPLAY: inline-block; HEIGHT: 48px" class="spinnerImageVml"><?xml:namespace prefix="rvml" ns = "urn:schemas-microsoft-com:vml" /><rvml:group style="POSITION: absolute; WIDTH: 48px; HEIGHT: 48px; rotation: 1deg" class="rvml" coordsize = "47,47"><rvml:image style="POSITION: absolute; WIDTH: 48px; HEIGHT: 48px; TOP: 0px; LEFT: 0px" class="rvml" src="/images/loading_gray.gif" coordsize="21600,21600"></rvml:image></rvml:group></span>
    <img class="spinnerImage" src="/images/loading_gray.gif" alt="loading..." />
    <div>Just one moment while we access this information...</div>
</div>

<script language="javascript" type="text/javascript">
    window.LoadProgress = (function (progress, $) {

        var getdialogHeight = function (height) {
            var isIE = navigator.userAgent.toLowerCase().indexOf('msie') > -1;
            if (isIE) {
                return height + 'px';
            }
            return height;
        };

        var isVmlSupported = function () {
            var a = document.body.appendChild(document.createElement('div'));
            a.innerHTML = '<v:shape id="vml_flag1" adj="1" />';
            var b = a.firstChild;
            b.style.behavior = "url(#default#VML)";
            var supported = b ? typeof b.adj == "object" : true;
            a.parentNode.removeChild(a);
            return supported;
        };

        var showAnimationDuringPageUnload = function () {
            if (isVmlSupported()) {
                $(".loadingNextPage > .spinnerImage").hide();
            }
            else {
                $(".loadingNextPage > .spinnerImageVml").hide();
            }
        };

        var openLoadingMessage = function () {
            $(".loadingNextPage").dialog({
                modal: true,
                closeOnEscape: true,
                title: 'Please wait...',
                closeText: 'x',
                height: getdialogHeight(200),
                buttons: {
                    "Close": function () {
                        $(this).dialog("close");
                    }
                }
            });
        };

        $('.myExitButton').click(function () {
            openLoadingMessage();
            showAnimationDuringPageUnload();
            window.location.href = 'http://www.stackoverflow.com';
        });


        return progress;
    })(window.LoadProgress || {}, window.jQuery);
</script>

Naturalmente, esto se basa en jQuery, jQueryUI y requiere un GIF animado de algún tipo ("/images/loading_gray.gif").

Jquery:

$("#WhereYouWantTheImageToAppear").html('<img src="./Animated.gif" />');

Acabo de tener un problema similar. Estos funcionaron perfectamente para mí.

$('#myElement').prepend('<img src="/path/to/img.gif" alt="My Gif" title="Loading" />');

$('<img src="/path/to/img.gif" alt="My Gif" title="Loading" />').prependTo('#myElement');

Otra idea fue usar .load () de jQuery; para cargar y luego anteponer la imagen.

Funciona en IE 7+

Muy, muy tarde para responder a esta, pero acabo de descubrir que el uso de una imagen de fondo codificada como un URI base64 en CSS, en lugar de mantenerse como una imagen separada, continúa animando en IE8.

Una forma muy sencilla es utilizar jQuery y el complemento SimpleModal . Luego, cuando necesito mostrar mi gif de "carga" al enviarlo, lo hago:

$('*').css('cursor','wait');
$.modal("<table style='white-space: nowrap'><tr><td style='white-space: nowrap'><b>Please wait...</b></td><td><img alt='Please wait' src='loader.gif' /></td></tr></table>", {escClose:false} );

Tuve este mismo problema, común también a otros prestatarios como Firefox. Finalmente descubrí que la creación dinámica de un elemento con un gif animado en el interior en el envío del formulario no se animaba, por lo que desarrollé la siguiente solución.

1) En document.ready(), cada FORMULARIO que se encuentra en la página, recibe la position:relativepropiedad y luego a cada uno se le adjunta unDIV.bg-overlay .

2) Después de esto, asumiendo que cada valor de envío de mi sitio web está identificado por la btn-primaryclase css, nuevamente en document.ready(), busco estos botones, recorro el formulario principal de cada uno, y en el formulario de envío, disparo la showOverlayOnFormExecution(this,true);función, paso el botón pulsado y un booleano que alterna la visibilidad de DIV.bg-overlay.

$(document).ready(function() {

  //Append LOADING image to all forms
  $('form').css('position','relative').append('<div class="bg-overlay" style="display:none;"><img src="/images/loading.gif"></div>');

  //At form submit, fires a specific function
  $('form .btn-primary').closest('form').submit(function (e) {
    showOverlayOnFormExecution(this,true);
  });
});

CSS para DIV.bg-overlayes el siguiente:

.bg-overlay
{
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  background:rgba(255,255,255,0.6);
  z-index:100;
}

.bg-overlay img
{
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-40px; //my loading images is 80x80 px. This is done to center it horizontally and vertically.
  margin-top:-40px;
  max-width:auto;
  max-height:80px;
}

3) En cualquier envío de formulario, la siguiente función se activa para mostrar una superposición de fondo semiblanco por todas partes (que niega la capacidad de interactuar nuevamente con el formulario) y un gif animado en su interior (que muestra visualmente una acción de carga).

function showOverlayOnFormExecution(clicked_button, showOrNot) 
{
    if(showOrNot == 1)
    {
        //Add "content" of #bg-overlay_container (copying it) to the confrm that contains clicked button 
        $(clicked_button).closest('form').find('.bg-overlay').show();
    }
    else
        $('form .bg-overlay').hide();
}

Mostrar un gif animado al enviar el formulario, en lugar de agregarlo en este evento, resuelve el problema de "congelación de animación gif" de varios navegadores (como dije, encontré este problema en IE y Firefox, no en Chrome)