CODEWITHSUNDEEP
javascripthtml
Shopmaster
Shopmaster

Reputation: 94

How can I replay an animated gif in IE and Chrome

I have the following code that works in Chrome but not IE11. When you press the replay button it should reload the gif so it starts all over.

<section class="slide2" id="wrapper2" style="margin:10px 0px 0px 50px;width: 800px; float:left;">
                <div class="newslide-content-image" style="display:block; float:left;"> 
                        <a href="#wrapper2" 
  onclick="document.getElementById('gif-1').src='assets/img/station3/LIC-S03_IterativeProcess_ANIM-V2.gif'">
                                <img src="assets/img/replay.png" /> Replay</a>
                       <div>                                 
                       <img id="gif-1" src="assets/img/station3/LIC-S03_IterativeProcess_ANIM-V2.gif"  width="100%" height="95%" border="0" />
                    </div>
                </div>
         </section>

Upvotes: 1

Views: 504

Answers (1)

Kosh
Kosh

Reputation: 18393

IE11 may cache images, so update image src with a unique query parameter (e.g. current time):

function replay() {
  var o = document.getElementById('gif-1');
  o.src = o.src.replace(/(\?\d+)?$/, '?'+Date.now());
}
<button onclick="replay()">Replay</button>
<br>
<img id="gif-1" src="https://i.imgur.com/MZhgmGz.gif">

Upvotes: 3

Related Questions