Animierte Gifs im IE

Datum: 4. Mai 2012
Autor*in: Bastian Schwarz


Gerade hat mich der IE mal wieder erstaunt (im negativen Sinne). Bei der IBE-Suche der AWK wird zur Überbrückung der Ladezeit eine Ladeanimation eingeblendet. Diese Animation wird mit einem animierten Gif dargestellt. Allerdings hat das Gif im Internet Explorer die Animation nicht ausgeführt.

Nach ein wenig Recherche bin ich auf einen Bug im IE gestoßen der die Animation von den Gifs nicht ausführen lässt wenn beim Hinzufügen des Objektes zum DOM das Objekt nicht sichtbar ist.

Der Workaround hierzu ist ein wenig tricky funktioniert aber einwandfrei. Ich habe eine einfach Funktion geschrieben die das src Attribut des Bildes nach einem kurzen Timeout erneut setzt. Das gleiche würde natürlich auch mit einem Div gehen, der die Grafik als background-image enthält.

function runAnimatedGif(animationImage, timeout) {
 if (animationImage.length === 0) return;
 timeout = timeout || 20;

  setTimeout(function() {
    animationImage.attr('src', animationImage.attr('src'));
  }, timeout);
}

Dieser Artikel wurde verschlagwortet unter:


Kommentare

Selber kommentieren:






Weitere Beiträge zum Thema Technologie


JAX 2015 – Tag 1

Autor*in:


Technologie


Dieses Jahr ging’s für mich zum ersten Mal nach Mainz zur JAX – der größten Java-Konferenz in Deutschland. Nach zwei Teilnahmen bei der WJAX in München, der kleinen Schwester der JAX, war ich natürlich gespannt, was in Mainz auf mich zukommen würde. Kontext und Schlüssel-Themen im Überblick Sebastian Meyen, Chefredakteur des Java-Magazins, eröffnete die Konferenz …


Beitrag lesen
24
APR
15

kraken.io: Einfaches Web Interface zur Bild-Optimierung

Autor*in: Benjamin Hofmann


Technologie // User Experience & Design


Auch wenn wir inzwischen vermehrt skalierbare Iconfonts oder SVG-Grafiken einsetzen, so kommt es doch immer wieder vor, dass wir auch Rastergrafiken in den Formaten JPEG, GIF oder PNG im Layout einsetzen. Was wir aber allzu oft übersehen ist, dass man bei diesen einiges an Dateigröße sparen kann. Und das kommt inzwischen nicht nur denen zugute, …


Beitrag lesen
28
NOV
14

Datenimporte in die imx.Platform

Autor*in: Tobias Pfannkuche


Technologie


Aufgrund der kontinuierlich steigenden Anzahl externer Datenlieferanten bzw. der Anbindung von Schnittstellen im Rahmen von Datenimporten und damit verbundenen wiederkehrenden Fragen, hier eine Zusammenfassung der Kern-Anforderungen, um Daten von Drittanbietern in die imx.Platform zu übernehmen, sowie Grundfunktionalitäten für Datenimporte. Anforderungen Grundsätzlich sind folgende technischen Anforderungen einer Schnittstelle, die wir zwecks Datenübernahme/-import nutzen wollen, zu erfüllen: …


Beitrag lesen
10
NOV
17

AJAX Ladeschnecke ohne Bilder oder zusätzlichem CSS

Autor*in: Stefan Oswald


Technologie // User Experience & Design


Der Anwendungsfall tritt sehr oft ein: Eine Ergebnisliste soll nachgefiltert werden, und zur Visualisierung, dass gerade etwas im Hintergrund passiert, soll eine „Ladeschnecke“ (oder vielleicht etwas old-school-mäßig ein Fortschrittsbalken) angezeigt werden. Oftmals wird das so umgesetzt, dass man im „beforeLoad“-Ereignis des AJAX-Calls eine animierte Grafik hinzufügt, welche im „complete“-Ereignis wieder entfernt oder unsichtbar gemacht wird. …


Beitrag lesen
23
JUL
14