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.
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.
Antworten:
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:
und in Ihrem HTML:
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.
quelle
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 ());alte Frage, aber dies für andere Googler posten:
Spin.js FUNKTIONIERT für diesen Anwendungsfall: http://fgnass.github.com/spin.js/
quelle
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).
quelle
Hier ist eine jsFiddle, die beim Senden von Formularen mit method = "post" einwandfrei funktioniert. Der Spinner wird beim Senden des Formulars hinzugefügt.
Siehe jsFiddle-Code hier
Testen Sie es hier in Ihrem IE-Browser
quelle
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.
quelle
beforeunload
oderunload
EreignisDieses 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:
Das hat bei mir in allen Browsern gut funktioniert!
quelle
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.gif
und damit geendet10.gif
) und das Verzeichnis anzugeben, in dem Sie sie aufbewahren.HTML:
JavaScript:
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.quelle
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):
[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.
quelle
$(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 einecannot set backgroundImage property of undefined
Fehlermeldung 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?background-image
Eigenschaftenunload
oderbeforeunload
Ereignissefestlegen. Siehe diese Frage oder diese jsFiddle für Details.Aufbauend auf der Antwort von @danfolkes funktionierte dies für mich in IE 8 und ASP.NET MVC3.
In unserer _Layout.cshtml
<<< Inhalt hier >>> ...
Und in unseren Navigationslinks:
oder
quelle
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:
quelle
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.
Dies basiert natürlich auf jQuery, jQueryUI und erfordert ein animiertes GIF ("/images/loading_gray.gif").
quelle
Jquery:
quelle
Hatte gerade ein ähnliches Problem. Diese haben bei mir perfekt funktioniert.
Eine andere Idee war, jQuerys .load () zu verwenden; um das Bild zu laden und dann voranzustellen.
Funktioniert in IE 7+
quelle
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.
quelle
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:
quelle
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 eineposition:relative
Eigenschaft empfangen und an jedes wird ein unsichtbares angehängtDIV.bg-overlay
.2) Danach, unter der Annahme, dass jeder Übermittlungswert meiner Website durch die
btn-primary
CSS-Klasse identifiziert wirddocument.ready()
, suche ich erneut unter nach diesen Schaltflächen, gehe zum übergeordneten FORMULAR der einzelnen Schaltflächen und feuere beim Senden des Formulars dieshowOverlayOnFormExecution(this,true);
Funktion aus, indem ich auf die angeklickte Schaltfläche und übergebe Ein Boolescher Wert, der die Sichtbarkeit von umschaltetDIV.bg-overlay
.CSS für
DIV.bg-overlay
ist das Folgende: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.
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).
quelle