Animiertes GIF beim Stoppen des IE

Kennt jemand eine Möglichkeit, animierte GIFs weiterhin zu animieren, nachdem Sie auf einen Link geklickt oder ein Formular auf der Seite gesendet haben, auf der Sie sich im IE befinden? Dies funktioniert gut in anderen Browsern.

Vielen Dank.

Die akzeptierte Lösung hat bei mir nicht funktioniert.

Nach einigen weiteren Recherchen bin ich auf diese Problemumgehung gestoßen , und sie funktioniert tatsächlich.

Hier ist der Kern davon:

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

und in Ihrem HTML:

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

Wenn das Formular gesendet wird, wird das <img/>Tag eingefügt und ist aus irgendeinem Grund nicht von den Animationsproblemen betroffen.

Getestet in Firefox, dh6, ie7 und ie8.

alte Frage, aber dies für andere Googler posten:

Spin.js FUNKTIONIERT für diesen Anwendungsfall: http://fgnass.github.com/spin.js/

IE geht davon aus, dass das Klicken auf einen Link eine neue Navigation ankündigt, in der der aktuelle Seiteninhalt ersetzt wird. Als Teil des Vorbereitungsprozesses wird der Code angehalten, der die GIFs animiert. Ich bezweifle, dass Sie etwas dagegen tun können (es sei denn, Sie navigieren nicht tatsächlich. Verwenden Sie in diesem Fall return false im Ereignis onclick).

Hier ist eine jsFiddle, die beim Senden von Formularen mit method = "post" einwandfrei funktioniert. Der Spinner wird beim Senden des Formulars hinzugefügt.

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

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

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

Siehe jsFiddle-Code hier

Testen Sie es hier in Ihrem IE-Browser

Ich bin auf diesen Beitrag gestoßen, und obwohl er bereits beantwortet wurde, sollte ich einige Informationen veröffentlichen, die mir bei diesem Problem speziell für IE 10 geholfen haben, und möglicherweise anderen helfen, mit einem ähnlichen Problem zu diesem Beitrag zu gelangen.

Ich war verblüfft, wie animierte Gifs in IE 10 einfach nicht angezeigt wurden, und fand dann dieses Juwel.

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

hoffe das hilft.

Dieses Problem trat auf, als ich versuchte, ein Lade-GIF anzuzeigen, während ein Formular gesendet wurde. Es hatte zusätzlichen Spaß, dass derselbe Onsubmit einen Validator ausführen musste, um sicherzustellen, dass das Formular korrekt war. Wie alle anderen (in jedem IE / GIF-Formularbeitrag im Internet) konnte ich den Ladespinner nicht dazu bringen, sich im IE zu "drehen" (und in meinem Fall das Formular zu validieren / senden). Beim Durchsuchen der Ratschläge auf http://www.west-wind.com fand ich einen Beitrag von ev13wt, der darauf hinwies, dass das Problem "... dass der IE das Bild nicht als animiert rendert, da es beim Rendern unsichtbar war." "" Das machte Sinn. Seine Lösung:

Lassen Sie das GIF-Feld leer und verwenden Sie JavaScript, um die Quelle in der Funktion onsubmit festzulegen - document.getElementById ('loadGif'). Src = "Pfad zur GIF-Datei".

So habe ich es implementiert:

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

Das hat bei mir in allen Browsern gut funktioniert!

Folgendes habe ich getan. Alles, was Sie tun müssen, ist, Ihr GIF aufzuteilen, um 10 Bilder zu sagen (in diesem Fall habe ich mit begonnen 01.gifund damit geendet 10.gif) und das Verzeichnis anzugeben, in dem Sie sie aufbewahren.

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

Diese Methode funktioniert mit IE7, IE8 und IE9 (obwohl für IE9 Sie verwenden könnten spin.js). HINWEIS: Ich habe dies in IE6 nicht getestet, da auf keinem Computer ein Browser aus den 60er Jahren ausgeführt wird, obwohl die Methode so einfach ist, dass sie wahrscheinlich sogar in IE6 und niedriger funktioniert.

Im Zusammenhang damit musste ich einen Fix finden, bei dem animierte Gifs als Hintergrundbild verwendet wurden, um sicherzustellen, dass das Styling im Stylesheet beibehalten wurde. Ein ähnlicher Fix hat auch dort für mich funktioniert ... mein Skript lief ungefähr so ​​(ich verwende jQuery, um den berechneten Hintergrundstil einfacher zu erhalten - wie man das ohne jQuery macht, ist ein Thema für einen anderen Beitrag):

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

[BEARBEITEN] Mit etwas mehr Tests habe ich gerade festgestellt, dass dies mit Hintergrundbildern in IE8 nicht funktioniert. Ich habe alles versucht, um IE8 dazu zu bringen, eine GIF-Animation zu rendern, während eine Seite geladen wird, aber es scheint derzeit nicht möglich zu sein.

Aufbauend auf der Antwort von @danfolkes funktionierte dies für mich in IE 8 und ASP.NET MVC3.

In unserer _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">

<<< Inhalt hier >>> ...

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

Und in unseren Navigationslinks:

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

oder

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

Diese Lösung finden Sie unter http://timexwebdev.blogspot.com/2009/11/html-postback-freezes-animated-gifs.html und es FUNKTIONIERT! Laden Sie das Bild einfach erneut, bevor Sie es auf sichtbar setzen. Rufen Sie die folgende Javascript-Funktion über den Klick auf Ihre Schaltfläche auf:

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

Mir ist klar, dass dies eine alte Frage ist und dass die Originalposter inzwischen jeweils eine Lösung gefunden haben, die für sie funktioniert. Ich bin jedoch auf dieses Problem gestoßen und habe festgestellt, dass VML-Tags diesem IE-Fehler nicht zum Opfer fallen. Animierte GIFs werden beim Entladen der Seite weiterhin verschoben, wenn sie mithilfe von VML-Tags im IE-Browser platziert werden.

Beachten Sie, dass ich VML zuerst erkannt habe, bevor ich mich für die Verwendung von VML-Tags entschieden habe, sodass dies in FireFox und anderen Browsern mit normalem animiertem GIF-Verhalten funktioniert.

So habe ich das gelöst.

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

Dies basiert natürlich auf jQuery, jQueryUI und erfordert ein animiertes GIF ("/images/loading_gray.gif").

Jquery:

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

Hatte gerade ein ähnliches Problem. Diese haben bei mir perfekt funktioniert.

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

Eine andere Idee war, jQuerys .load () zu verwenden; um das Bild zu laden und dann voranzustellen.

Funktioniert in IE 7+

Sehr, sehr spät, um diese Frage zu beantworten, aber ich habe gerade festgestellt, dass die Verwendung eines Hintergrundbilds, das im CSS als base64-URI codiert ist, anstatt als separates Bild gespeichert zu werden, im IE8 weiterhin animiert wird.

Eine sehr einfache Möglichkeit ist die Verwendung des jQuery- und SimpleModal-Plugins . Wenn ich dann mein "Laden" -GIF beim Senden anzeigen muss, mache ich Folgendes:

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

Ich hatte das gleiche Problem, das auch anderen Kreditnehmern wie Firefox gemeinsam war. Schließlich stellte ich fest, dass das dynamische Erstellen eines Elements mit animiertem GIF beim Senden des Formulars nicht animiert wurde. Daher entwickelte ich das folgende Workaorund.

1) Bei document.ready()jedem auf der Seite gefundenen FORMULAR wird eine position:relativeEigenschaft empfangen und an jedes wird ein unsichtbares angehängt DIV.bg-overlay.

2) Danach, unter der Annahme, dass jeder Übermittlungswert meiner Website durch die btn-primaryCSS-Klasse identifiziert wird document.ready(), suche ich erneut unter nach diesen Schaltflächen, gehe zum übergeordneten FORMULAR der einzelnen Schaltflächen und feuere beim Senden des Formulars die showOverlayOnFormExecution(this,true);Funktion aus, indem ich auf die angeklickte Schaltfläche und übergebe Ein Boolescher Wert, der die Sichtbarkeit von umschaltet 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 für DIV.bg-overlayist das Folgende:

.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) Bei jeder Formularübermittlung wird die folgende Funktion ausgelöst, um eine halbweiße Hintergrundüberlagerung (die die Möglichkeit der erneuten Interaktion mit dem Formular verweigert) und ein animiertes GIF (das eine Ladeaktion visuell anzeigt) anzuzeigen.

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

Das Anzeigen von animiertem GIF beim Senden von Formularen, anstatt es bei diesem Ereignis anzuhängen, löst das Problem des Einfrierens von GIF-Animationen in verschiedenen Browsern (wie gesagt, ich habe dieses Problem in IE und Firefox gefunden, nicht in Chrome).