gif animation not playing on refresh

Question

First time I view the page with an animated .gif it plays fine on page load (lasts about 2 secs).

On refresh (F5), the .gif no longer plays and only the last frame of gif animation is shown.

Is there anything I can do do to make sure it plays everytime?

Electorate

Answer 1

For the PHP the much better option then using date("Ymdgis"); is using time(), like this:

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

Publia

Your answer save me for ever from Ctrl+F5 ! Thank you. – Quent

Answer 2

Strange behavior that's affects every browser..
I usually refresh it manually with this script (it uses 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>

This will refresh the src of the image adding the current date, so the browser will re-load it, thinking that's a new image.

Otherwise in PHP way (I prefer this one):

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

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

Bullring

when i apply that php method i get about a second delay on the display of the gif when on website, but not when on localhost. do you know why that is? – Infusionism

yes, I noticed that little problem, but I didn't care cause that's a very little time... :-) – Bullring

if you ever find out let me know for i really want to find out. – Infusionism

How to handle background images in this scenario ? – Depredation

insert some php inside the css, like div.animated{background:url(image.gif?<?php echo date("Ymdgis");?>);} – Bullring

Nine years later, this code still helped me. Thanks dog, my gifs fresh on the fly for another 9 years because of this lovely thing we call the interweb ye ye – Expressionism

Answer 3

The workaround that works for me for this issue is to reload the GIF manually using Javascript

GIF implemented on CSS (background-images)

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

GIF implemented on HTML (img tag)

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

Thanks to @sekmo

Clue

Answer 4

This works, only requires one line below it and I suggest not filling the <img> src attribute at first so the page doesn't try to load any unnecessary resources.

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

Permission

Answer 5

It could be that your browser is just showing the cached version. Try holding shift and refreshing, and see if it works.

Pfeifer