Question

我有以下适用于Chrome的代码，但不适用于IE11。当您按下重播按钮时，它应该重新加载gif，以便从头开始。

<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>

Answer 1

IE11可能会缓存图像，因此请使用唯一的查询参数（例如当前时间）更新图像src：

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">

如何在IE和Chrome中重播动画gif

1 个答案: