GIF animado no IE parando

109

Alguém conhece uma solução alternativa para fazer GIFs animados continuarem a ser animados depois de clicar em um link ou enviar um formulário na página que você está no IE? Isso funciona bem em outros navegadores.

Obrigado.

Matt
fonte
3
A única resposta certa aqui é @AnthonyWJones. Para POSTs, submissões reais (não ajax) nada funciona.
P.Brian.Mackey
Na verdade, isso não é verdade. Usar um tempo limite para mostrar a imagem no evento onsubmit funciona bem com o formulário POST.
oldwizard
@ P.Brian.Mackey - a solução de j.davis funcionou para mim até mesmo para uma solicitação de postagem. No entanto, também estamos usando o kit de ferramentas ajaxcontrol para fazer uma chamada para o método do lado do servidor. Não funciona nesse caso.
Ankur-m
possível duplicação do GIF animado do Progresso
Jason Kresowaty
Confira a resposta de Jourdan aqui . Eu acho que é uma solução melhor e funciona no IE de nível inferior também.
Jason Kresowaty

Respostas:

99

A solução aceita não funcionou para mim.

Depois de mais algumas pesquisas, descobri essa solução alternativa e ela realmente funciona.

Aqui está a essência disso:

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

e em seu html:

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

Portanto, quando o formulário é enviado, a <img/>tag é inserida e, por algum motivo, não é afetada pelos problemas de animação, por exemplo.

Testado no Firefox, ie6, ie7 e ie8.

j.davies
fonte
8
Em seu código, você nunca realiza um POST. Apenas a chamada javascript "onclick =". Tentei fazer isso com um POST, como é esperado quando você clica em enviar, e não funciona.
P.Brian.Mackey
A menos que você esteja retornando false no final de seu onclick, o botão de envio irá disparar um POST. Isso é o que os botões de envio fazem.
Frug
2
-1 Esta resposta também é ERRADA. Não funciona no IE7 e IE8 a imagem GIF FREZEES após o envio do formulário.
Marco Demaio
2
Isso funcionou para mim usando jQuery. O hack é muito estranho, tenho que admitir. É assim que funcionou no meu exemplo: code<div id = "img_content"> <img id = 'aj_loader' src = 'assets / 2631.gif' style = "display: none;" /> </div> E então: code$ ("# img_content"). html ($ ("# img_content"). html ());
misaizdaleka
35

velha pergunta, mas postando para outros googlers:

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

Entendu
fonte
Correção, funciona, mas para de animar logo antes de a página carregar. Portanto, se for um carregamento curto, parece que a animação congela como na edição original.
James McMahon
Ótima solução, funcionando bem no ie11, então ainda parece estar atualizado e com suporte.
Adam Knights
spin.js, infelizmente, consome bastante CPU. Consulte as edições / 8 , as edições / 200 , as edições / 215
user247702
Spin.js não está funcionando para mim no iPhone. Ele também congela assim que a página é redirecionada para outra.
Ankur-m
18

O IE assume que o clique em um link anuncia uma nova navegação onde o conteúdo da página atual será substituído. Como parte do processo de preparação para isso, ele interrompe o código que anima os GIFs. Duvido que haja algo que você possa fazer sobre isso (a menos que você não esteja realmente navegando; nesse caso, use return false no evento onclick).

AnthonyWJones
fonte
1 - Tentei as duas respostas principais. Nenhum dos dois funciona. Não vou transformar todos os envios de meu formulário em solicitações ajax.
P.Brian.Mackey
2
+1 Eu concordo, esta é a única resposta certa, exceto para soluções alternativas para spin.js e CodeMonkey.
Marco Demaio
7
E ainda no IE10
ChadT
9
E ainda no IE11!
bileyazan
2
2017 se registrando!
Steve Wakeford
17

Aqui está um jsFiddle que funciona muito bem no envio de formulário com method = "post". O botão giratório é adicionado no evento de envio de formulário.

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

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

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

Veja o código jsFiddle aqui

Teste-o em seu navegador IE aqui

velho feiticeiro
fonte
2
Sim, funciona muito bem (testado apenas no IE 10 até agora). Mas não consigo descobrir por que a animação é interrompida quando pré-carrego a imagem na memória. Posso pré-carregar no seu violino e funciona bem, mas não no meu código, argh.
Simon East,
Você fez algo errado. :) Adicionar a imagem giratória como uma tag img à sua página? Eu atualizei o url. Pode ajudar.
oldwizard,
O IE parece um idiota. Pára a animação quando pré-carregada. Quando injetada via jquery, a animação continuará funcionando. Obrigado por esta solução.
Anthony
8

Eu me deparei com este post, e embora já tenha sido respondido, senti que deveria postar algumas informações que me ajudassem com esse problema específico do IE 10, e que possam ajudar outras pessoas que chegam a este post com um problema semelhante.

Fiquei perplexo ao ver como os gifs animados simplesmente não eram exibidos no IE 10 e então encontrei esta joia.

ToolsInternet OptionsAdvancedMultiMediaPlay animations in webpages

espero que isto ajude.

funkymushroom
fonte
Não, isso não resolve o problema no IE11 (mas +1 para tentar ajudar)! :( Isto é - eu tenho esta opção habilitada e GIFs animados não são animados, quando mostrados em beforeunloadou unloadevento.
trejder
1
Isso não tem nada a ver com o problema colocado na pergunta.
user247702
2

Eu encontrei esse problema ao tentar mostrar um gif de carregamento durante o processamento de um envio de formulário. Ele tinha uma camada adicional de diversão, pois o mesmo onsubmit precisava executar um validador para garantir que o formulário estava correto. Como todo mundo (em todas as postagens do formulário IE / gif na Internet), não consegui fazer o botão giratório de carregamento "girar" no IE (e, no meu caso, validar / enviar o formulário). Enquanto procurava conselhos em http://www.west-wind.com , encontrei uma postagem de ev13wt que sugeria que o problema era "... que o IE não renderiza a imagem como animada porque ela estava invisível quando foi renderizada. " Isso fazia sentido. Sua solução:

Deixe em branco onde o gif iria e use o JavaScript para definir a fonte na função onsubmit - document.getElementById ('loadingGif'). Src = "caminho para o arquivo gif".

Veja como eu implementei:

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

Isso funcionou bem para mim em todos os navegadores!

filósofo perdido
fonte
A configuração de src também funcionou para mim no IE11. No meu caso, é em combinação com a re-adição do img html primeiro. Não sei por que preciso de ambos. É interessante notar que também estou definindo 'display' (para bloquear), em vez de modificar a 'visibilidade'.
Cfold
2

Aqui está o que eu fiz. Tudo que você precisa fazer é dividir seu GIF para dizer 10 imagens (neste caso, comecei com 01.gife terminei com 10.gif) e especificar o diretório onde você as mantém.

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 com IE7, IE8 e IE9 (embora você possa usar o IE9 spin.js). NOTA: Não testei isso no IE6, pois não tenho uma máquina rodando um navegador dos anos 60, embora o método seja tão simples que provavelmente funciona até no IE6 e anteriores.

Klemen Tušar
fonte
1
Essa solução alternativa funciona, com base no mesmo princípio de rotação, usando basicamente um JS setTimeout para simular uma animação GIF.
Marco Demaio
1

Relacionado a isso, eu tive que encontrar uma solução onde os gifs animados eram usados ​​como uma imagem de fundo para garantir que o estilo fosse mantido na folha de estilo. Uma correção semelhante funcionou para mim também ... meu script era mais ou menos assim (estou usando jQuery para tornar mais fácil obter o estilo de fundo calculado - como fazer isso sem jQuery é um tópico para outra postagem):

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] Com mais alguns testes, acabei de perceber que isso não funciona com imagens de fundo no IE8. Tenho tentado tudo que posso pensar para fazer o IE8 renderizar uma animação GIF enquanto carrega uma página, mas não parece possível neste momento.

CodeMonkey
fonte
Por que você está lendo o código CSS usando jQuery ( $(spinner).css('background-image')), mas em vez de configurá-lo da mesma forma, você está usando o modo Javascript puro ( spinner.style.backgroundImage). Seu código não está funcionando para mim em nenhum navegador. Se eu usar diretamente seu código, estou recebendo um cannot set backgroundImage property of undefinederro. Se eu alterar seu código para definir CSS usando jQuery, o código será executado sem erros, mas a imagem não será redefinida e o elemento div / spinner permanecerá vazio. Eu não sei porque
trejder
Verificado ! Não há chance, seu código funcionará. Nenhum navegador não écapaz (em dezembro de 2014) de definirbackground-imagepropriedades emunloadoubeforeunloadeventos. Veja esta pergunta ou este jsFiddle para obter detalhes.
trejder
1

Com base na resposta de @danfolkes, isso funcionou para mim no IE 8 e ASP.NET MVC3.

Em nosso _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">

<<< conteúdo aqui >>> ...

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

E em nossos links de navegação:

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

ou

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

Encontrei esta solução em http://timexwebdev.blogspot.com/2009/11/html-postback-freezes-animated-gifs.html e FUNCIONA! Basta recarregar a imagem antes de definir como visível. Chame a seguinte função Javascript a partir do clique de seu botão:

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.
fonte
0

Sei que essa é uma questão antiga e que agora os participantes originais encontraram uma solução que funciona para eles, mas me deparei com esse problema e descobri que as tags VML não são vítimas desse bug do IE. Os GIFs animados ainda se movem durante o descarregamento da página quando colocados no navegador IE usando tags VML.

Observe que detectei o VML primeiro, antes de tomar a decisão de usar tags VML, portanto, isso está funcionando no FireFox e em outros navegadores que usam o comportamento normal de GIF animado.

Veja como eu resolvi isso.

<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, isso depende do jQuery, jQueryUI e requer um GIF animado de algum tipo ("/images/loading_gray.gif").

David
fonte
0

Jquery:

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

Só tive um problema semelhante. Isso funcionou perfeitamente para mim.

$('#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');

Outra ideia era usar .load () do jQuery; para carregar e anexar a imagem.

Funciona no IE 7+


fonte
0

Muito, muito tarde para responder a esta, mas acabei de descobrir que o uso de uma imagem de plano de fundo codificada como URI base64 no CSS, em vez de mantida como uma imagem separada, continua a ser animada no IE8.

Marca
fonte
0

Uma maneira muito fácil é usar o plugin jQuery e SimpleModal . Então, quando preciso mostrar meu gif "carregando" no envio, eu faço:

$('*').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
fonte
-1

Eu tive esse mesmo problema, comum também a outros borwsers como o Firefox. Finalmente descobri que criar dinamicamente um elemento com gif animado dentro de form submit não animado, então desenvolvi o seguinte workaorund.

1) Em document.ready(), cada FORMULÁRIO encontrado na página, recebe uma position:relativepropriedade e a seguir a cada um está anexado um invisível DIV.bg-overlay.

2) Depois disso, supondo que cada valor de envio do meu site seja identificado pela btn-primaryclasse css, novamente em document.ready(), procuro esses botões, dirijo para o FORM pai de cada um e no formulário envio, disparo a showOverlayOnFormExecution(this,true);função, passando o botão clicado e um booleano que alterna a visibilidade 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-overlayé o seguinte:

.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) Em qualquer envio de formulário, a função a seguir é disparada para mostrar uma sobreposição de fundo semi-branco sobre ele (que nega a capacidade de interagir novamente com o formulário) e um gif animado dentro dele (que mostra visualmente uma ação de carregamento).

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 gif animado no envio do formulário, em vez de anexá-lo neste evento, resolve o problema de "congelamento de animação gif" de vários navegadores (como disse, encontrei esse problema no IE e no Firefox, não no Chrome)

Luca Detomi
fonte