GIF animado en IE deteniéndose

109

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

mattt
fuente
3
La única respuesta correcta aquí es @AnthonyWJones. Para los POST, los envíos reales (no ajax) no funcionan.
P.Brian.Mackey
En realidad, eso no es cierto en absoluto. Usar un tiempo de espera para mostrar la imagen en el evento onsubmit funciona bien con el formulario POST.
viejo mago
@ P.Brian.Mackey: la solución de j.davis funcionó para mí incluso para una solicitud de publicación. Sin embargo, también estamos usando el kit de herramientas ajaxcontrol para realizar una llamada al método del lado del servidor. No funciona en ese caso.
Ankur-m
posible duplicado del gif animado de progreso
Jason Kresowaty
Mira la respuesta de Jourdan aquí . Creo que es una mejor solución y también funciona en IE de nivel inferior.
Jason Kresowaty

Respuestas:

99

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.

j.davies
fuente
8
En su código, nunca realiza un POST. Solo la llamada javascript "onclick =". Intenté esto con un POST como se esperaba cuando haces clic en enviar y no funciona.
P.Brian.Mackey
A menos que devuelva falso al final de su onclick, el botón de enviar activará un POST. Eso es lo que hacen los botones de envío.
Frug
2
-1 Esta respuesta también es INCORRECTA. No funciona en IE7 e IE8, la imagen gif se FREZEES después del envío del formulario.
Marco Demaio
2
Esto funcionó para mí usando jQuery. El truco es bastante extraño, tengo que admitirlo. Así es como funcionó en mi ejemplo: code<div id = "img_content"> <img id = 'aj_loader' src = 'assets / 2631.gif' style = "display: none;" /> </div> Y luego: code$ ("# img_content"). html ($ ("# img_content"). html ());
misaizdaleka
35

pregunta anterior, pero publicando esto para otros googlers:

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

Entendu
fuente
Corrección, funciona pero deja de animarse justo antes de que se cargue la página. Entonces, si es una carga corta, parece que la animación se congela como en el número original.
James McMahon
Gran solución, funciona bien en ie11, por lo que todavía parece estar actualizado y compatible.
Adam Knights
spin.js desafortunadamente consume bastante CPU. Ver problemas / 8 , problemas / 200 , problemas / 215
user247702
Spin.js no me funciona en iPhone. También se congela tan pronto como la página se redirige a otra.
Ankur-m
18

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

AnthonyWJones
fuente
+1 - Probé las dos respuestas principales. Ninguno de los dos funciona. No voy a convertir todos mis formularios enviados en solicitudes ajax.
P.Brian.Mackey
2
+1 Estoy de acuerdo, esta es la única respuesta correcta, a excepción de las soluciones spin.js y CodeMonkey.
Marco Demaio
7
Y todavía en IE10
ChadT
9
¡Y todavía en IE11!
bileyazan
2
2017 registrando!
Steve Wakeford
17

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í

viejo mago
fuente
2
Sí, esto funciona muy bien (solo probado en IE 10 hasta ahora). Pero no puedo entender por qué se detiene la animación cuando precargo la imagen en la memoria. Puedo precargar en tu violín y funciona bien, pero no en mi código, argh.
Simon East
Hiciste algo mal. :) ¿Añadir la imagen giratoria como una etiqueta img a su página? Actualicé la URL. Podría ayudar.
oldwizard
IE es solo un idiota, parece. Detiene la animación cuando está precargada. Cuando se inyecta a través de jquery, la animación seguirá avanzando. Gracias por esta solucion.
Anthony
8

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.

ToolsInternet OptionsAdvancedMultiMediaPlay animations in webpages

espero que esto ayude.

funkymushroom
fuente
¡No, eso no resuelve el problema en IE11 (pero +1 por intentar ayudar)! :( Es decir - He activado esta opción y GIF animados no son animados, cuando se muestra en beforeunloado unloadevento.
trejder
1
Esto no tiene nada que ver con el problema planteado en la pregunta.
user247702
2

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!

filosofo perdido
fuente
La configuración de src también funcionó para mí en IE11. En mi caso, es en combinación con volver a agregar el html img primero. No estoy seguro de por qué necesito ambos. Es interesante notar que también estoy configurando 'mostrar' (bloquear), en lugar de modificar 'visibilidad'.
Cfold
2

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.

Klemen Tušar
fuente
1
Esta solución funciona, basada en el mismo principio de giro, js básicamente usando un JS setTimeout para simular una animación gif.
Marco Demaio
1

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.

CodeMonkey
fuente
Por qué está leyendo código CSS usando jQuery ( $(spinner).css('background-image')), pero en lugar de configurarlo de la misma manera, está usando la forma pura de Javascript ( spinner.style.backgroundImage). Tu código no me funciona en ningún navegador. Si utilizo directamente su código, entonces recibo un cannot set backgroundImage property of undefinederror. Si cambio su código para configurar CSS usando jQuery, el código se ejecuta sin errores, pero la imagen no se restablece y el elemento div / spinner permanece vacío. No lo se porque
trejder
Verificado ! No hay posibilidad, tu código funcionará. Ningún navegador no puede (a partir de diciembre de 2014) establecerbackground-imagepropiedades enunloadobeforeunloadeventos. Ver esta pregunta o este jsFiddle para obtener más detalles.
trejder
1

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()" })
Equipo
fuente
1

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';
}
Dan H.
fuente
0

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").

David
fuente
0

Jquery:

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

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+


fuente
0

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.

marca
fuente
0

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} );
Matt Roy
fuente
-1

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)

Luca Detomi
fuente