3

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="">
</div>

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

Caro
  • 89
  • 1
  • 10

2 Answers2

2

You could try something like this:

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

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.

ffgpga08
  • 155
  • 1
  • 11
  • THAT DID THE TRICK!!! I feel so stupid for not thinking about that earlier... Thank you so so so so much, I had a headache because of this! – Caro Jul 20 '16 at 17:03
  • Sure thing, glad to help! – ffgpga08 Jul 20 '16 at 19:06
  • Hey, not sure if I should do this here but... What you did, what does that do exactly? I mean, It indeed works awesome when reloaded but every single time I scroll the gif starts over – Caro Jul 25 '16 at 21:08
  • As I said, it prevents the browser from being able to cache the gif. Take a look at this answer: http://stackoverflow.com/a/729623/2122300 Though I must say, if scrolling causes the image to load again, that makes things interesting. Does it do this in all modern browsers? – ffgpga08 Jul 25 '16 at 21:16
  • haha it's a pain, been in this for like... three days now. And yes, It happens in all browsers – Caro Jul 25 '16 at 21:43
2

In your div put a ng-init="varname = 'images/unnamed.gif'". Then in your img element ng-src="varname". This should override the original source attribute of the img.

My Code:

<div class="col-xs-12 text-center" ng-init="varname='images/unamed.gif'"> <img ng-src="{{varname}}"> </div>

Mike Hohne
  • 405
  • 1
  • 6
  • 8
  • This is a very good one. However, if the ng-src needed to be changed inside an "if" condition... how could I access to it? – Caro Jul 25 '16 at 21:04