gif-Animation wird beim Aktualisieren nicht abgespielt

Question

Beim ersten Mal, wenn ich die Seite mit einer animierten .gif-Datei aufrufe, wird sie beim Laden der Seite problemlos abgespielt (dauert etwa 2 Sekunden).

Beim Aktualisieren (F5) wird die .gif-Datei nicht mehr abgespielt und nur das letzte Bild der gif-Animation wird angezeigt.

Kann ich irgendetwas tun, um sicherzustellen, dass es jedes Mal abgespielt wird?

Answer 1

Für PHP ist die viel bessere Option als die Verwendung von date("Ymdgis"); verwendet time() etwa so:

<img src="picturePath.gif?<?php echo time();?>" />

Answer 2

Seltsames Verhalten, das sich auf jeden Browser auswirkt.
Ich aktualisiere sie normalerweise manuell mit diesem Skript (es verwendet jQuery)

<img id="gif_animata" src="picturePath.gif">
<script type="text/javascript">
    var gifSource = $('#gif_animata').attr('src'); //get the source in the var
    $('#gif_animata').attr('src', ""); //erase the source     
    $('#gif_animata').attr('src', gifSource+"?"+new Date().getTime()); //add the date to the source of the image... :-) 
</script>

Dadurch wird die src des Bildes aktualisiert und das aktuelle Datum hinzugefügt, so dass der Browser es neu lädt und denkt, es sei ein neues Bild.

Ansonsten auf PHP-Art (ich bevorzuge diese):

<img src="picturePath.gif?<?php echo date("Ymdgis");?>" />

//for the browser it will seems that's a new picture!
<img src="picturePath.gif?2012092011207">

Answer 3

Der Workaround, der bei mir für dieses Problem funktioniert, ist das manuelle Nachladen des GIFs mit Javascript

GIF auf CSS implementiert (Hintergrundbilder)

var element = document.getElementById(name);
element.style.backgroundImage = "none";  
element.style.backgroundImage = "url(imagepath.gif?"+new Date().getTime()+")";

GIF in HTML implementiert (img-Tag)

var element = document.getElementById(name);
element.src = "";  
element.src = "imagepath.gif?"+new Date().getTime();

Dank an @sekmo

Answer 4

Dies funktioniert, erfordert nur eine Zeile darunter und ich schlage vor, die <img> src-Attribut, damit die Seite nicht versucht, irgendwelche unnötigen Ressourcen zu laden.

<img id="gif" src=""/>
<script>document.getElementById('gif').src="path_to_picture.gif?a="+Math.random()</script>

Answer 5

Es könnte sein, dass Ihr Browser nur die gecachte Version anzeigt. Versuchen Sie, die Umschalttaste gedrückt zu halten und die Seite zu aktualisieren, um zu sehen, ob es funktioniert.