GIF Animation neu starten: Wenn der Browser sie nur einmal abspielt!

GIF Animationen sind praktische, kleine Frame-Animationen: Jeder Frame kann eine eigene Farbpalette haben und eine eigene Anzeigedauer. Außerdem lässt sich festlegen, ob die Animation einmal, mehrere Male oder unendlich wiederholt wird. Moderne Browser speichern die Animation aber gern im Cache: Dann wird sie nicht mehr neu gestartet. Das ist praktisch, wenn eine große GIF Animation, die unendlich wiederholt wird, gezeigt werden soll.

GIF Animation neu starten

Soll eine Animation nur einmal gezeigt werden, dafür bei jedem Seitenaufruf, stört der Cache. Eine Möglichkeit, den Browser-Cache zu umgehen, ist ein Attribut an den Dateinamen anzuhängen. Wie bei Webseiten lässt sich auch bei einem Bild mit einem Fragezeichen “?” ein Wert mitgeben. Den Wert wollen wir gar nicht auswerten, es ist nur wichtig, damit der Browser die Animation neu lädt.

Eine andere Möglichkeit ist Javascript: Damit setzen wir den URL-Wert für das Bild neu, so dass es neu angezeigt wird. Es kann dabei trotzdem aus dem Cache kommen, wird aber von vorn abgespielt!

PHP: Zufallswert anhängen und Bild immer neu laden

Die einfachste Variante funktioniert mit PHP: Dabei wird ein zufälliger Wert an den Dateinamen gehängt und der Browser lädt das Bild neu ein.

Durch das Neuladen wird die Animation auch erneut abgespielt. Da sie für jeden Seitenaufruf wieder neu von dem Server geladen wird, ist dieser Trick nur bei kleinen GIF Animationen sinnvoll. Bei größeren Dateien können durch die Übertragung Pausen bei der Wiedergabe entstehen, außerdem zusätzliche Kosten durch den Netzwerk-Traffic.

So geht’s mit PHP: Wir hängen einfach einen zufälligen Paramater an den Datei-Namen an:

<img src="animation.gif?<?php echo rand(1, 15); ?>">

Hier wird mit PHP eine zufällige Zahl zwischen eins und fünfzehn an den Dateinamen gehängt: Dieser heißt dann zum Beispiel:

animation.gif?4

Der Browser hält die Datei nun für ein neues Bild, das erneut geladen und angezeigt wird. Dabei wird die GIF Animation auch erneut von Beginn abgespielt.

Javascript: Animation auch per Klick neu starten

Mit Javascript hat man noch mehr Möglichkeiten: So lässt sich die GIF Animation nicht nur beim Neuladen der Seite von Beginn an abspielen, sondern auch zum Beispiel per Klick! Hier zunächst die Variante, mit der das GIF per Klick neu gestartet wird:

<script type="text/javascript">
function restart(id,url) {
   var img = document.getElementById(id);
   img.src = "";
   img.src = url;
}
</script>

<img id="bild" src="bild.gif">

<br>
<a href="javascript:restart('bild','bild.gif');">Neu abspielen!</a>

Das Bild (<img>) bekommt eine eindeutige ID, über die man es ansprechen kann. In dem Link “Neu abspielen!” wird die Javascript Funktion aufgerufen: Hier werden die Bild-ID und die Adresse übermittelt. So funktioniert es auch mit mehreren Bildern und Links.

Das Javascript löscht zunächst die Quelle (src) des Bildes und setzt dann die Adresse neu: Dadurch startet der Browser die Animation erneut. Im Unterschied zu der PHP Variante, bei der das Bild neu übertragen wird, kommt das Bild hier aus dem Browser-Cache: es muss also nicht jedes Mal neu geladen werden.