Animiertes GIF beim Stoppen des IE

109

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.

mattt
quelle
3
Die einzig richtige Antwort hier ist @AnthonyWJones. Bei POSTs funktioniert das tatsächliche Senden (nicht Ajax) nichts.
P.Brian.Mackey
Eigentlich stimmt das gar nicht. Die Verwendung einer Zeitüberschreitung zum Anzeigen des Bilds im Ereignis onsubmit funktioniert problemlos mit dem Formular POST.
alter Zauberer
@ P.Brian.Mackey - Lösung von j.davis hat für mich sogar für eine Post-Anfrage funktioniert. Wir verwenden jedoch auch das ajaxcontrol-Toolkit, um die serverseitige Methode aufzurufen. In diesem Fall funktioniert es nicht.
Ankur-m
Mögliches Duplikat von Update Progress animierten GIF stoppt beim Postback
Jason Kresowaty
Schauen Sie sich Jourdan Antwort hier . Ich denke, es ist eine bessere Lösung und es funktioniert auch auf Downlevel-IE.
Jason Kresowaty

Antworten:

99

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.

j.davies
quelle
8
In Ihrem Code führen Sie niemals einen POST durch. Nur der Javascript-Aufruf "onclick =". Ich habe dies mit einem POST versucht, wie erwartet, wenn Sie auf Senden klicken, und es funktioniert nicht.
P.Brian.Mackey
Sofern Sie am Ende Ihres Onclicks nicht false zurückgeben, löst die Senden-Schaltfläche einen POST aus. Das ist es, was Submit-Buttons tun.
Frug
2
-1 Diese Antwort ist auch falsch. In IE7 und IE8 funktioniert das GIF-Bild nach dem Absenden des Formulars nicht.
Marco Demaio
2
Dies funktionierte bei mir mit jQuery. Der Hack ist ziemlich komisch, muss ich zugeben. So hat es in meinem Beispiel funktioniert: code<div id = "img_content"> <img id = 'aj_loader' src = 'assets / 2631.gif' style = "display: none;" /> </ div> Und dann: code$ ("# img_content"). html ($ ("# img_content"). html ());
Misaizdaleka
35

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

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

Entendu
quelle
Korrektur, es funktioniert, stoppt jedoch die Animation unmittelbar vor dem Laden der Seite. Wenn es sich also um eine kurze Ladung handelt, sieht es so aus, als ob die Animation wie in der Originalausgabe einfriert.
James McMahon
Tolle Lösung, funktioniert gut in IE11, scheint also immer noch auf dem neuesten Stand zu sein und wird unterstützt.
Adam Knights
spin.js ist leider ziemlich CPU-intensiv. Siehe Ausgaben / 8 , Ausgaben / 200 , Ausgaben / 215
user247702
Spin.js funktioniert bei mir nicht auf dem iPhone. Es friert auch ein, sobald die Seite auf eine andere Seite umgeleitet wird.
Ankur-m
18

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

AnthonyWJones
quelle
+1 - Ich habe beide Top-Antworten ausprobiert. Beides funktioniert nicht. Ich werde nicht alle meine Formularübermittlungen in Ajax-Anfragen umwandeln.
P.Brian.Mackey
2
+1 Ich stimme zu, dies ist die einzig richtige Antwort, außer für spin.js und CodeMonkey-Problemumgehungen.
Marco Demaio
7
Und immer noch in IE10
ChadT
9
Und immer noch in IE11!
Rileyazan
2
2017 einchecken!
Steve Wakeford
17

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

alter Zauberer
quelle
2
Ja, das funktioniert super (bisher nur in IE 10 getestet). Ich kann jedoch nicht herausfinden, warum die Animation gestoppt wird, wenn ich das Bild im Speicher vorlade. Ich kann deine Geige vorladen und es funktioniert in Ordnung, nur nicht in meinem Code, argh.
Simon East
Du hast etwas falsch gemacht. :) Das Spinner-Bild als IMG-Tag zu Ihrer Seite hinzufügen? Ich habe die URL aktualisiert. Könnte helfen.
Oldwizard
IE ist nur ein Idiot, wie es scheint. Stoppt die Animation beim Vorladen. Wenn die Animation über jquery injiziert wird, tuckert sie weiter. Danke für diese Lösung.
Anthony
8

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.

ToolsInternet OptionsAdvancedMultiMediaPlay animations in webpages

hoffe das hilft.

Funkymushroom
quelle
Nein, das löst das Problem in IE11 nicht (aber +1 für den Versuch zu helfen)! :( Das heißt - Ich habe diese Option aktiviert und animierte GIFs werden nicht animiert, wenn sie in beforeunloadoder unloadEreignis
angezeigt werden
1
Dies hat nichts mit dem in der Frage aufgeworfenen Problem zu tun.
user247702
2

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!

verlorener Philosoph
quelle
Das Einstellen von src hat auch in IE11 für mich funktioniert. In meinem Fall ist es in Kombination mit dem erneuten Hinzufügen des img html zuerst. Ich bin mir nicht sicher, warum ich beides brauche. Es ist interessant festzustellen, dass ich auch "Anzeige" (zum Blockieren) einstelle, anstatt "Sichtbarkeit" zu ändern.
Cfold
2

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.

Klemen Tušar
quelle
1
Diese Problemumgehung basiert auf demselben Spinprinzip und verwendet im Wesentlichen ein JS-setTimeout, um eine GIF-Animation zu simulieren.
Marco Demaio
1

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.

CodeMonkey
quelle
Warum Sie CSS-Code mit jQuery ( $(spinner).css('background-image')) lesen , aber anstatt ihn auf die gleiche Weise festzulegen, verwenden Sie den reinen Javascript-Weg ( spinner.style.backgroundImage). Ihr Code funktioniert in keinem Browser für mich. Wenn ich Ihren Code direkt verwende, wird eine cannot set backgroundImage property of undefinedFehlermeldung angezeigt. Wenn ich Ihren Code so ändere, dass CSS mit jQuery festgelegt wird, wird der Code fehlerfrei ausgeführt, aber das Bild wird nicht zurückgesetzt und das div / spinner-Element bleibt leer. Ich weiß nicht warum?
Trejder
Verifiziert ! Es gibt keine Chance, Ihr Code wird funktionieren. Kein Browserkann (Stand Dezember 2014) keinebackground-image EigenschaftenunloadoderbeforeunloadEreignissefestlegen. Siehe diese Frage oder diese jsFiddle für Details.
Trejder
1

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

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';
}
Dan H.
quelle
0

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

David
quelle
0

Jquery:

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

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+


quelle
0

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.

Kennzeichen
quelle
0

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} );
Matt Roy
quelle
-1

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

Luca Detomi
quelle