GIF animata in IE che si ferma


109

Qualcuno sa come fare per fare in modo che le GIF animate continuino ad essere animate dopo aver fatto clic su un collegamento o inviato un modulo nella pagina in cui ti trovi in ​​IE? Funziona bene in altri browser.

Grazie.


3
L'unica risposta giusta qui è @AnthonyWJones. Per i POST, gli invii effettivi (non ajax) non funzionano.
P.Brian.Mackey

In realtà questo non è affatto vero. L'uso di un timeout per mostrare l'immagine sull'evento onsubmit funziona perfettamente con il modulo POST.
oldwizard

@ P.Brian.Mackey - la soluzione di j.davis ha funzionato per me anche per una richiesta di post. Tuttavia stiamo anche utilizzando ajaxcontrol toolkit per effettuare una chiamata al metodo lato server. In questo caso non funziona.
Ankur-m

possibile duplicato della gif animata
Jason Kresowaty

Dai un'occhiata alla risposta di Jourdan qui . Penso che sia una soluzione migliore e funziona anche su IE di livello inferiore.
Jason Kresowaty

Risposte:


99

La soluzione accettata non ha funzionato per me.

Dopo qualche altra ricerca mi sono imbattuto in questa soluzione alternativa e in realtà funziona.

Ecco il succo:

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

e nel tuo html:

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

Quindi, quando il modulo viene inviato, il <img/>tag viene inserito e per qualche motivo non è influenzato dai problemi di animazione ie.

Testato in Firefox, ie6, ie7 e ie8.



8
Nel tuo codice non esegui mai effettivamente un POST. Solo la chiamata javascript "onclick =". L'ho provato con un POST come previsto quando fai clic su Invia e non funziona.
P.Brian.Mackey

A meno che tu non restituisca false alla fine del tuo onclick, il pulsante di invio attiverà un POST. Questo è ciò che fanno i pulsanti di invio.
Frug

2
-1 Anche questa risposta è SBAGLIATA. Non funziona in IE7 e IE8 l'immagine gif FREZEES dopo l'invio del modulo.
Marco Demaio

2
Questo ha funzionato per me usando jQuery. L'hack è piuttosto strano, devo ammetterlo. Ecco come ha funzionato nel mio esempio: code<div id = "img_content"> <img id = 'aj_loader' src = 'assets / 2631.gif' style = "display: none;" /> </div> E poi: code$ ( "# img_content") html ($ ( "# img_content") html ().).;
misaizdaleka

35

vecchia domanda, ma pubblicando questo per altri googler:

Spin.js FUNZIONA per questo caso d'uso: http://fgnass.github.com/spin.js/


Correzione, funziona ma interrompe l'animazione subito prima del caricamento della pagina. Quindi, se si tratta di un caricamento breve, sembra che l'animazione si blocchi come nel numero originale.
James McMahon

Ottima soluzione, funziona bene in ie11 quindi sembra ancora tutto aggiornato e supportato.
Adam Knights

purtroppo spin.js è piuttosto impegnativo per la CPU. Vedere i problemi / 8 , i problemi / 200 , i problemi / 215
user247702

Spin.js non funziona per me su iPhone. Inoltre si blocca non appena una pagina viene reindirizzata a un'altra.
Ankur-m

18

IE presuppone che il clic su un collegamento preannunci una nuova navigazione in cui verranno sostituiti i contenuti della pagina corrente. Come parte del processo di preparazione, interrompe il codice che anima le GIF. Dubito che ci sia qualcosa che puoi fare al riguardo (a meno che tu non stia effettivamente navigando, nel qual caso usa return false nell'evento onclick).


+1 - Ho provato entrambe le risposte migliori. Nessuno dei due funziona. Non trasformerò tutti i miei moduli inviati in richieste ajax.
P.Brian.Mackey

2
+1 Sono d'accordo, questa è l'unica vera risposta giusta, ad eccezione di spin.js e soluzioni alternative CodeMonkey.
Marco Demaio

7
E ancora in IE10
ChadT

9
E ancora in IE11!
bileyazan

2
Check-in 2017!
Steve Wakeford

17

Ecco un jsFiddle che funziona perfettamente su form submit con method = "post". Lo spinner viene aggiunto all'evento di invio del modulo.

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

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

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

Vedi il codice jsFiddle qui

Provalo nel tuo browser IE qui


2
Sì, funziona benissimo (finora testato solo in IE 10). Ma non riesco a capire perché l'animazione viene interrotta quando precarico l'immagine in memoria. Posso precaricare il tuo violino e funziona bene, ma non nel mio codice, argh.
Simon East

Hai fatto qualcosa di sbagliato. :) Aggiungere l'immagine dello spinner come tag img alla tua pagina? Ho aggiornato l'URL. Potrebbe aiutare.
oldwizard

IE è solo un idiota a quanto pare. Arresta l'animazione quando precaricata. Quando iniettato tramite jquery, l'animazione continuerà a sussultare. Grazie per questa soluzione.
Anthony

8

Mi sono imbattuto in questo post e, sebbene abbia già ricevuto una risposta, ho sentito che avrei dovuto pubblicare alcune informazioni che mi hanno aiutato con questo problema specifico di IE 10 e potrebbero aiutare altri che arrivano a questo post con un problema simile.

Sono rimasto sconcertato dal fatto che le gif animate non fossero visualizzate in IE 10 e poi ho trovato questo gioiello.

ToolsInternet OptionsAdvancedMultiMediaPlay animations in webpages

spero che questo ti aiuti.


No, questo non risolve il problema in IE11 (ma +1 per aver cercato di aiutare)! :( Cioè - ho questa opzione abilitata e le GIF animate non sono animate, quando vengono mostrate in beforeunloado in un unloadevento.
trejder

1
Ciò non ha nulla a che fare con il problema posto nella domanda.
user247702

2

Ho riscontrato questo problema durante il tentativo di mostrare una GIF in caricamento durante l'elaborazione di un modulo di invio. Aveva un ulteriore livello di divertimento in quanto lo stesso onsubmit doveva eseguire un validatore per assicurarsi che il modulo fosse corretto. Come tutti gli altri (su ogni post di modulo IE / gif su Internet) non sono riuscito a far "girare" lo spinner di caricamento in IE (e, nel mio caso, convalidare / inviare il modulo). Mentre guardavo i consigli su http://www.west-wind.com ho trovato un post di ev13wt che suggeriva che il problema era "... che IE non rende l'immagine come animata perché era invisibile quando è stata renderizzata. " Aveva senso. La sua soluzione:

Lascia vuoto il punto in cui la gif andrebbe e utilizza JavaScript per impostare l'origine nella funzione onsubmit - document.getElementById ('loadingGif'). Src = "percorso del file gif".

Ecco come l'ho implementato:

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

Questo ha funzionato bene per me in tutti i browser!


L'impostazione di src ha funzionato anche per me in IE11. Nel mio caso, è in combinazione con la riaggiunta di img html prima. Non sono sicuro del motivo per cui ho bisogno di entrambi. È interessante notare che sto anche impostando "display" (per bloccare), invece di modificare la "visibilità".
Cfold

2

Ecco cosa ho fatto. Tutto quello che devi fare è suddividere la tua GIF per dire 10 immagini (in questo caso ho iniziato 01.gife finito con 10.gif) e specificare la directory in cui le conservi.

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

Questo metodo funziona con IE7, IE8 e IE9 (anche se per IE9 potresti usarlo spin.js). NOTA: non l'ho testato in IE6 poiché non ho una macchina che esegue un browser degli anni '60, sebbene il metodo sia così semplice che probabilmente funziona anche in IE6 e versioni precedenti.


1
Questa soluzione alternativa funziona, basata sullo stesso principio di rotazione, js fondamentalmente utilizzando un setTimeout JS per simulare un'animazione gif.
Marco Demaio

1

In relazione a questo, ho dovuto trovare una soluzione in cui le gif animate fossero utilizzate come immagine di sfondo per garantire che lo stile fosse mantenuto nel foglio di stile. Una correzione simile ha funzionato anche per me lì ... il mio script è andato qualcosa del genere (sto usando jQuery per rendere più facile ottenere lo stile di sfondo calcolato - come farlo senza jQuery è un argomento per un altro post):

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

[EDIT] Con un po 'più di test mi sono appena reso conto che questo non funziona con le immagini di sfondo in IE8. Ho provato tutto ciò che mi viene in mente per ottenere IE8 per il rendering di un'animazione gif durante il caricamento di una pagina, ma non sembra possibile in questo momento.


Perché stai leggendo il codice CSS usando jQuery ( $(spinner).css('background-image')), ma invece di impostarlo allo stesso modo, stai usando il puro modo Javascript ( spinner.style.backgroundImage). Il tuo codice non funziona per me in nessun browser. Se utilizzo direttamente il tuo codice, ricevo un cannot set backgroundImage property of undefinederrore. Se cambio il tuo codice per impostare CSS usando jQuery, il codice viene eseguito senza errori, ma l'immagine non viene ripristinata e l'elemento div / spinner rimane vuoto. Non lo so, perché?
trejder

Verificato ! Non ci sono possibilità, il tuo codice funzionerà. Nessun browser non è ingrado (a partire da dicembre 2014) di impostarebackground-imageproprietàunloadobeforeunloadeventi. Vedi questa domanda o questo jsFiddle per i dettagli.
trejder

1

Basandosi sulla risposta di @danfolkes, questo ha funzionato per me in IE 8 e ASP.NET MVC3.

Nel nostro _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">

<<< contenuto qui >>> ...

<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 nei nostri link di navigazione:

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

o

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

1

Ho trovato questa soluzione su http://timexwebdev.blogspot.com/2009/11/html-postback-freezes-animated-gifs.html e FUNZIONA! Ricarica semplicemente l'immagine prima di impostarla su visibile. Chiama la seguente funzione Javascript dal tuo pulsante al clic:

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

0

Mi rendo conto che questa è una vecchia domanda e che ormai tutti i poster originali hanno trovato una soluzione che funzioni per loro, ma mi sono imbattuto in questo problema e ho scoperto che i tag VML non sono vittime di questo bug di IE. Le GIF animate si spostano ancora durante lo scaricamento della pagina quando vengono posizionate nel browser IE utilizzando i tag VML.

Si noti che ho rilevato VML prima di prendere la decisione di utilizzare i tag VML, quindi funziona in FireFox e altri browser che utilizzano il normale comportamento GIF animato.

Ecco come l'ho risolto.

<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, questo si basa su jQuery, jQueryUI e richiede una GIF animata di qualche tipo ("/images/loading_gray.gif").


0

jquery:

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

0

Ho appena avuto un problema simile. Questi hanno funzionato perfettamente per me.

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

Un'altra idea era quella di utilizzare .load () di jQuery; per caricare e quindi anteporre l'immagine.

Funziona in IE 7+


0

Molto, molto tardi per rispondere a questa domanda, ma ho appena scoperto che l'utilizzo di un'immagine di sfondo codificata come URI base64 nel CSS, piuttosto che come immagine separata, continua ad animarsi in IE8.


0

Un modo molto semplice è usare jQuery e il plugin SimpleModal . Quindi, quando ho bisogno di mostrare la mia gif di "caricamento" su invio, faccio:

$('*').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} );

-1

Ho avuto lo stesso problema, comune anche ad altri utenti come Firefox. Alla fine ho scoperto che la creazione dinamica di un elemento con gif animata all'interno del modulo di invio non si animava, quindi ho sviluppato il seguente workaorund.

1) In document.ready(), ad ogni MODULO che si trova nella pagina, ricevi position:relativeproprietà e poi ad ognuno è allegato un invisibile DIV.bg-overlay.

2) Dopodiché, supponendo che ogni valore di invio del mio sito Web sia identificato dalla btn-primaryclasse css, di nuovo in document.ready(), cerco questi pulsanti, raggiungo il form genitore di ciascuno e in invio del modulo, lancio la showOverlayOnFormExecution(this,true);funzione, passando il pulsante cliccato e un valore booleano che attiva / disattiva la visibilità di 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 per DIV.bg-overlayè il seguente:

.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) Ad ogni invio del modulo, viene attivata la seguente funzione per mostrare uno sfondo semi-bianco sovrapposto (che nega la capacità di interagire di nuovo con il modulo) e una gif animata al suo interno (che mostra visivamente un'azione di caricamento).

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

Mostrare gif animate al modulo di invio, invece di aggiungerle a questo evento, risolve il problema di "congelamento dell'animazione gif" di vari browser (come detto, ho riscontrato questo problema in IE e Firefox, non in Chrome)

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.