Caro Caro - 3 months ago 6x
CSS Question

Gif is not working when the page is reloaded. Only works when the window is open for the first time

So, I have a gif which works fine if I load the website for the first time... but if I reload or go home, and then come back to that section... it displays the final Image (as if the animation already happened)...
The gif only plays once (it was created to animate only once). However, I believe it should play everytime the web is refreshed. How can I control that?

The code is simple

<div class="col-xs-12 text-center">
<img src="images/unnamed.gif" id="gif" alt="">

I searched but couldn't find an answer. However, this gif is in an angular partial. And I belive that might be affecting it somehow. I created a random document in another project without angular and it works fine.... If anyone has a clue it would be appreciated


You could try something like this:

<div class="col-xs-12 text-center">
    <img src="" id="gif" alt="">
<script type="text/javascript">
    document.getElementById('gif').src = 'images/unnamed.gif?q=' + new Date().getTime();

This will prevent the browser from being able to cache the gif so it needs to load again every page load. It just sounds like some sort of either caching issue or something not set up properly when you created the gif.