CODEWITHSUNDEEP
javascripthtmlcss
user2840467
user2840467

Reputation: 893

Non-looping Animated Gif won't replay on web page reload

I've created an animated gif that only plays once in Fireworks.

I've placed it on the webpage: http://www.mediaworks.co.uk/content-marketing/hollywood-survival/index.html

but if you refresh the page in Chrome or Firefox the gif doesn't play again.

My code is:

<!doctype html>

<html>
<head>
<meta charset="utf-8">
<title>Hollywood vs the Great Outdoors</title>

<style>
#case_1 {position:absolute;top:0px;left:0px;z-index:50;}
</style>
</head>

<body>

<div id="case_1"><img src="dvd_open_1.gif" /></div>

</body>
</html>

Can anyone please help? Kind regards Greg

Upvotes: 7

Views: 9540

Answers (1)

user2704193
user2704193

Reputation:

The reason why this happens is that the browser is caching the image..sort of.

<div id="case_1"><img id="image" src="dvd_open_1.gif" /></div>
<script type="text/javascript">
    $(document).ready(function () {
        $("#image").attr("src", "dvd_open_1.gif?" + Math.random());
    });
</script>

Basically what this does is adding a random string ?randomNumberString which tricks the browser in thinking that it is different file.

p.s. you will need to include the jQuery lib into your file to use the jQuery(document).ready function.

Upvotes: 7

Related Questions