GIF animata in arresto IE

Qualcuno sa come aggirare l’idea di rendere animati i GIF animati dopo aver fatto clic su un link o aver inviato un modulo sulla pagina in IE? Funziona bene con altri browser.

Grazie.

La soluzione accettata non ha funzionato per me.

Dopo ulteriori ricerche ho trovato questa soluzione alternativa , e in realtà funziona.

Ecco il succo di ciò:

function showProgress() { var pb = document.getElementById("progressBar"); pb.innerHTML = ''; pb.style.display = ''; } 

e nel tuo html:

   

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

Testato su Firefox, ie6, ie7 e ie8.

vecchia domanda, ma pubblicandola per gli altri googler:

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

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

Ecco un jsFiddle che funziona bene sul modulo submit con method = “post”. Lo spinner viene aggiunto al modulo submit event.

 $("form").bind("submit", onFormSubmit); function onFormSubmit() { setTimeout(showSpinner, 1); } function showSpinner() { $("body").append($('Spinner')); } 

Vedi il codice jsFiddle qui

Provalo nel tuo browser IE qui

Mi sono imbattuto in questo post e, sebbene sia già stata fornita una risposta, ho sentito che dovrei pubblicare alcune informazioni che mi hanno aiutato con questo problema specifico di IE 10, e che potrebbe aiutare gli altri che arrivano a questo post con un problema simile.

Ero sconcertato di come le gif animate non fossero state mostrate in IE 10 e poi ho trovato questo gioiello.

StrumentiOpzioni InternetAvanzateMultiMediaRiproduci animazioni nelle pagine web

spero che questo ti aiuti.

Ho riscontrato questo problema durante il tentativo di mostrare una gif di caricamento durante l’elaborazione di un modulo. Aveva un ulteriore livello di divertimento nel fatto che lo stesso onsubmit doveva eseguire un validatore per assicurarsi che il modulo fosse corretto. Come tutti gli altri (su ogni post 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 osservavo 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 al momento del rendering. ” Aveva senso. La sua soluzione:

Lascia vuoto dove gif andrebbe e usa JavaScript per impostare l’origine nella funzione onsubmit: document.getElementById (‘loadingGif’). Src = “percorso del file gif”.

Ecco come l’ho implementato:

  

Questo ha funzionato bene per me in tutti i browser!

Ecco cosa ho fatto. Tutto quello che devi fare è scomporre la tua GIF per dire 10 immagini (in questo caso ho iniziato con 01.gif e 01.gif terminato con 10.gif ) e 10.gif specificato la directory in cui le tieni.

HTML:

 

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 (sebbene per IE9 si possa usare spin.js ). NOTA: Non ho testato questo 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.

A questo proposito ho dovuto trovare una correzione in cui le immagini animate erano utilizzate come immagine di sfondo per garantire che lo stile venisse mantenuto nel foglio di stile. Una correzione simile ha funzionato anche per me lì … il mio script è andato in questo modo (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 =  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 posso immaginare per ottenere IE8 per il rendering di un’animazione gif che carica una pagina, ma al momento non sembra ansible.

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

Nel nostro _Layout.cshtml

  
Progress

< << contenuto qui >>> …

    

E nei nostri link di navigazione:

  

o

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

Ho trovato questa soluzione su http://timexwebdev.blogspot.com/2009/11/html-postback-freezes-animated-gifs.html e FUNZIONA! È sufficiente caricare nuovamente l’immagine prima di impostarla su visibile. Chiama la seguente funzione Javascript dal pulsante onclick del tuo pulsante:

 function showLoader() { //*** Reload the image for IE *** document.getElementById('loader').src='./images/https://stackoverflow.com/questions/780560/animated-gif-in-ie-stopping/loader.gif'; //*** Let's make the image visible *** document.getElementById('loader').style.visibility = 'visible'; } 

Mi rendo conto che si tratta di una vecchia domanda e che ormai i poster originali hanno trovato una soluzione che funziona per loro, ma ho riscontrato questo problema e ho scoperto che i tag VML non cadono vittime di questo bug di IE. Le GIF animate si muovono ancora durante lo scaricamento della pagina quando vengono posizionate sul browser IE utilizzando i tag VML.

Avviso Ho rilevato VML prima di prendere la decisione di utilizzare i tag VML, quindi funziona su FireFox e altri browser che utilizzano il normale comportamento GIF animato.

Ecco come ho risolto questo.

    

Naturalmente, questo si basa su jQuery, jQueryUI e richiede una GIF animata di qualche tipo (“https://stackoverflow.com/images/loading_gray.gif”).

jquery:

 $("#WhereYouWantTheImageToAppear").html(''); 

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

 $('#myElement').prepend('My Gif'); $('My Gif').prependTo('#myElement'); 

Un’altra idea era usare jQuery’sload (); caricare e quindi anteporre l’immagine.

Funziona in IE 7+

Molto, molto tardi per rispondere a questo, ma ho appena scoperto che l’uso di un’immagine di sfondo codificata come URI base64 nel CSS, anziché conservarla come un’immagine separata, continua ad animare in IE8.

Un modo molto semplice è usare il plugin jQuery e SimpleModal . Quindi quando ho bisogno di mostrare la mia gif “loading” su submit, lo faccio:

 $('*').css('cursor','wait'); $.modal("
Please wait...Please wait
", {escClose:false} );

Ho avuto lo stesso problema, comune anche ad altri utenti come Firefox. Alla fine ho scoperto che creare dynamicmente un elemento con gif animate all’interno di form non animate, quindi ho sviluppato il seguente workaorund.

1) A document.ready() , ogni FORM trovato nella pagina, riceve la position:relative proprietà position:relative e quindi a ciascuno di essi è associato un DIV.bg-overlay invisibile.

2) Dopo questo, supponendo che ogni valore di invio del mio sito web sia identificato dalla class css btn-primary , sempre su document.ready() , cerco questi pulsanti, attraversi il FORM padre di ciascuno, e al form submit, I fire showOverlayOnFormExecution(this,true); funzione, passando il pulsante cliccato e un valore booleano che DIV.bg-overlay visibilità di DIV.bg-overlay .

 $(document).ready(function() { //Append LOADING image to all forms $('form').css('position','relative').append(''); //At form submit, fires a specific function $('form .btn-primary').closest('form').submit(function (e) { showOverlayOnFormExecution(this,true); }); }); 

Il 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) In qualsiasi forma di invio, viene triggersta la seguente funzione per mostrare una sovrapposizione di sfondo semi-bianco dappertutto (che nega la possibilità di interagire di nuovo con la forma) 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 le gif animate al modulo di invio, invece di aggiungerlo a questo evento, risolve il problema “gif animation freeze” dei vari browser (come detto, ho trovato questo problema in IE e Firefox, non in Chrome)