I have an animated GIF that loops three times. I have noticed in Firefox and Chrome (haven't checked others) that I can view the GIF once and then if I reload the page, the cached GIF is not animated at all.
Is there a solution to this? Is there something about the animated GIF that I could change to prevent this from occurring?
Its a super ugly solution but you could use this if your calling the image inline, not pretty but it works!
<img src="filename.gif?rand=<?=rand(1,1000);?>" alt="" />
hope that helps
The solution I chose in this case was to append a GET variable to the end of the graphic name, preventing the graphic from being reloaded from cache when the page refreshes.
var myImg = new Image();
myImg.src = "image.gif?rnd=" + Math.random();
Jade O'Connor's solution works but as said it's an ugly solution. Because each time you visit the page the image is downloaded from the server. This leads to bandwith problems for large images. This also increases the page loading time, hence it's bad for slow connections.
Is there a better solution?
I figured out something like this:
I regenerated the animated gif in loop "forever" mode. In my gif, there were 20 frames and each one is shown for 150 ms. So that one step of the loop lasts for 3 seconds. I also created a jpeg version of the last frame of the animation.
When the page loads I used window.setTimeout() method for replacing the gif with the jpeg after 3 seconds. Because, I wanted the final frame stand still when the first step of the loop is finished. But there were timing problems. When the last frame is shown the animation restarts before I could replace the gif by the jpeg. Is there a way to detect if the animation is finished or restarted?
Could you point us to the GIF in question? Does it happen with all GIFs you use? All made with the same application?
Anyway, just don't cache and voila, solved. But I think you should use another application to create your GIF and see if it works correctly.
In Firefox, you can force a full reload (reload the cache) with Ctrl+Shift+R or Ctrl+F5.
In Chrome, it's Ctrl+F5 or Shift+F5.
