GIF animata in IE che si ferma

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.

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.

vecchia domanda, ma pubblicando questo per altri googler:

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

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

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

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.

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

spero che questo ti aiuti.

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!

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.

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.

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

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

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

jquery:

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

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+

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.

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

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)