Restart a GIF animation: Let the browser play it again from start!

GIF animations can loop for ever or play only a given amount of times: It is possible to play the animation only once without looping. Every frame can have it’s own color palette and duration time: This makes the GIF animation a nice tool to animate elements on a web page. With a modern browser there are some flaws, though: The browser will cache the GIF file. If you reload the page, it will only show the last frame and not the entire animation again!

Restart a GIF Animation: Play from first frame on every page load

To view the animation beginning with the first frame on every page load, you have to trick the browser: This will force it to not show the animation from cache. You can do this by loading th GIF file again with a random number as a parameter at the end: This will prevent the browser to load it from cache. Another option is to use JavaScript: You can clear the animation and restart it easily. This way the animation can also be played again when you click on a button. This works without reloading the animation: it will also save traffic costs for you and the visitor.

PHP: Add a random parameter to load the GIF again

A very easy and handy trick is to just add a random parameter to the file name: You can do this easily with PHP. The browser has to load the file again from the server, not from cache, because of the different file name: This way it will always be played from the beginning.

PHP solution: Add a random number at the end of the filename to load the animation again:

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

PHP will add a random number from 1 to 50 at the end from the file name. Because the number is seperated with a question mark from the filename, you don’t have to alter the file name at all!

This is how the file name could look like:

animation.gif?40

Because the file will be loaded from the server again on every page load, this doesn’t work well for large GIF animations: They could need to much time to load and cost traffic for you and the visitor on every reload. Here you should take a look at the JavaScript version below!

Javascript: Restart the GIF animation with a click

When using JavaScript, there are some additional possibilities: You have more control on the page’s elements and can not only play the GIF animation from the beginnin on every page load, but also restart it when clicking a button or a link!

In this version we are clearing the animation’s src-field and setting it again with the image’s URL. The browser will restart the animation without loading it again: This way it can be restarted while still in the browser’s cache!

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

<img id="anim" src="image.gif">

<br>
<a href="javascript:restart('anim','image.gif');">Play animation again!</a>

The GIF image (<img>) needs an unique ID (in our example: „anim“). You need this to address it via JavaScript. By clicking the link „Play animation again!“ the Javascript function is called with the image’s ID and it’s URL: This way it would work with more than one image as well.

The JavaScript function clears the image’s (src) and sets the URL again: This way the browser will restart the animation from the first frame but without loading it again from the server to save some traffic.