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


Preload – was bringts?

Autor*in:


Technologie


Im Laufe der Umsetzung des Grassau-Portals habe ich mich mal mit Preloading im html auseinandergesetzt. Benutzt wird das Ganze, um Resourcen wie z.B. Styles, Fonts etc. effizienter laden zu können und somit die Performance zu verbessern. Der Vorteil gegenüber dem ja inzwischen schon etwas älteren Prefetching ist, dass im Tag ein Type angegeben wird, der …


Beitrag lesen
28
FEB
17

IPC 2011

Autor*in: Bastian Schwarz


Technologie


Hier wie versprochen die Präsentation aus dem developer-Meeting. IPC 2011 Liksammlung: http://joind.in/event/view/806 http://qafoo.com/presentations.html http://sinonjs.org/qunit/ http://packages.zendframework.com/docs/latest/manual/en/index.html http://butunclebob.com/ArticleS.UncleBob.PrinciplesOfOod


Beitrag lesen
17
NOV
11

lory

Autor*in: Benjamin Hofmann


Technologie // User Experience & Design


Und schon wieder habe ich eine kleine schöne Javascript-Library gefunden: lory. Diesmal ist es keine Lightbox-Lösung wie PhotoSwipe gestern, sondern ein simpler Slider. Auch dieses Skript ist auf den mobilen Anwendungsfall ausgelegt und kann von Haus aus mit Swipes umgehen. Auch das sogenannte Infinite-Sliding ist möglich und auch dieses Skript lässt sich über RequireJS nutzen …


Beitrag lesen
23
SEP
16