我试图在用户点击它时重新启动gif，而不必重新加载它（我的gif太重了，我实际上是为我的应用程序预加载它）。我目前的代码在Chrome和所有＆＃34;现代浏览器＆＃34;上完美运行，但我需要在IE11中工作，以及斗争开始的地方。
以下是一个示例代码，在Chrome上完美运行但在IE11上无效：
function activate_gif(){
document.getElementById("img1").src = "https://i.imgur.com/Rsc0qOw.gif";
}.myDiv{
width: 500px;
height: 300px;
}
.myDiv img{
width: 100%;
height: 100%;
}<button onclick="activate_gif()">
Click me
</button>
<div class="myDiv">
<img id="img1" src="https://i.imgur.com/Rsc0qOw.gif">
</div>
你也可以在这个jsFiddle上找到它：https://jsfiddle.net/c6hodyh2/3/
您可以找到问题的其他（非）工作示例（适用于Chrome，不适用于IE）：https://codepen.io/InSightGraphics/pen/CAlci
尝试1
从this SO question，我尝试了以下JS代码，以及＃34;强制＆＃34;要刷新的缓存：
function activate_gif(){
document.getElementById("img1").src = "";
document.getElementById("img1").src = "https://i.imgur.com/Rsc0qOw.gif";
}
结果： 没有成功，它与原始代码完全没有任何不同。
尝试2
从this article开始，我尝试刷新innerHTML内容：
function activate_gif(){
document.getElementById("img1").style.display = '';
document.getElementById("img1").innerHTML = document.getElementById("img1").innerHTML;
}
结果： IE中没有变化，并且在其他浏览器中停止工作，所以我认为它触发了控制台错误。
尝试3
从this SO question开始，我尝试使用解决方案的简化版本，主要是通过在源网址中添加随机后缀来强制再次加载图片：
function activate_gif(){
document.getElementById('myImg').src = 'mysrc.gif?' + Math.random();
}
结果： 这会重新加载gif，它可以自行解决缓存问题。但是，我在实际应用程序中使用的GIF太重了，因此如果每次用户按下按钮时都要下载图像，则会导致用户体验不佳，特别是对于带宽较弱的用户而言。
尝试4
从@ IStepashka的回答中，我尝试先设置一个（随机的，在网上找到的）空白图像，然后再回放原始来源：
function activate_gif(){
document.getElementById("img1").src = "https://i.ytimg.com/vi/f3cLOucMpD0/maxresdefault.jpg";
document.getElementById("img1").src = "https://i.imgur.com/Rsc0qOw.gif";
}
结果： 与尝试1 相同，它没有改变任何内容。我的代码仍在使用Chrome，但不适用于IE。
答案 0 :(得分：2)
将GIF文件转换为视频并使用https://pastebin.ca/4029336 HTML标记可能更合适。请参阅Jeremy Wagner撰写的<video>文章。但是如果你想坚持使用GIF，你可以使用XMLHttpRequest，Blob和给定CORS的对象URL，并且适当地配置缓存相关的HTTP头：
function activate_gif(){
var url = "https://i.imgur.com/Rsc0qOw.gif";
var img = document.getElementById( "img1" );
var xhr = new XMLHttpRequest();
// Browser will take cached response if it has cache entry with url key.
xhr.open( "GET", url );
xhr.responseType = "blob";
xhr.onload = function() {
if ( xhr.status != 200 ) {
// Complain.
return;
}
var blobUrl = URL.createObjectURL( xhr.response );
img.src = blobUrl;
setTimeout( function () {
// Let browser display blob and revoke blob after stack unwind.
URL.revokeObjectURL( blobUrl );
}, 0 ); // You might need to increase delay time for large images.
};
xhr.send();
}.myDiv{
width: 500px;
height: 300px;
}
.myDiv img{
width: 100%;
height: 100%;
}<button onclick="activate_gif()">
Click me
</button>
<div class="myDiv">
<img id="img1" src="https://i.imgur.com/Rsc0qOw.gif">
</div>
您还可以使用浏览器检测在其他用户代理中使用更高效，更简单的代码。
有关详细信息，请查看：
答案 1 :(得分：0)
尝试首先将任何空白图像设置为源并获取原始源图像。 那样：
function activate_gif(){
document.getElementById("img1").src = "images/blank.jpg"
document.getElementById("img1").src = "https://i.imgur.com/Rsc0qOw.gif";
}
答案 2 :(得分：0)
似乎IE 11实际上不会重放（非循环）gif，如果它在缓存中，并且同一src gif的所有实例实际上都是同步的...它似乎是另一个IE＆＃39; s ......呃，让我们称之为怪癖。
这是一个（悲伤的）解决方法。它会重新加载gif，但至少它会在后台重新加载它，以免对用户xp产生太大影响。我将你的gif改为2MO +，以显示背景加载。
请注意，这应仅用于IE，因为其他浏览器可以很好地使用简单的解决方案。
var oldNode = document.getElementById("img1"),
src = oldNode.src + "?bust=",
nextNode = oldNode.cloneNode(),
parent = oldNode.parentNode;
nextNode.src = src + new Date().getTime();
function activate_gifIE(){
oldNode.removeNode();
parent.appendChild(nextNode);
oldNode = nextNode;
nextNode = oldNode.cloneNode();
nextNode.src = src + new Date().getTime();
}.myDiv{
width: 500px;
height: 300px;
}
.myDiv img{
width: 100%;
height: 100%;
}<button onclick="activate_gifIE()">
Click me
</button>
<div class="myDiv">
<img id="img1" src="https://media.giphy.com/media/LRVnPYqM8DLag/giphy.gif" height="200px">
</div>
我见过this one和that one等变通方法，但它们涉及循环gif，并在它们前面覆盖静止帧，或用它替换它们。同样在IE 11上，您将不得不在gif随机时间让用户登陆，因为您似乎无法让它重播...
无论如何，希望它有所帮助。