Recently I had to build a website and add some fancy effects to it. Animated GIFs were used for smaller effects, CSS3 and Javascript for other dynamic stuff. Anyway, the animated GIFs were playing just once when the website was loaded fresh (i.e. no cache) and then just stood there. I must add at this point it’s about non-looping GIFs, because for looping you wouldn’t notice the effect. Just standing there, doing nothing but being. What’s going on, we thought (because I was getting comments here)?
After the browser has gotten the image and saves it to the cache, it’s not replayed when reloading from cache. This is odd! The image is there, the state is new, so replay.
One possible solution is to add a random string to your image’s source either via Javascript or some server-side code, but this is not very clean. http://goo.gl/uuyFd9
The fact is: reload and replay from first frame, Google!