Javascript 重新启动gif而不在IE11中重新加载它

我试图在用户单击gif时重新启动它，而不必重新加载它（我的gif太重了，我实际上为我的应用程序预加载了它）。我目前的代码在Chrome和所有“现代浏览器”上都能很好地工作，但我也需要它在IE11上工作，这就是斗争的开始

下面是一个示例代码，它可以在Chrome上完美运行，但在IE11上却无法运行：

函数激活\u gif（）{
document.getElementById（“img1”）.src=”https://i.imgur.com/Rsc0qOw.gif";
}

.myDiv{
宽度：500px；
高度：300px；
}
.myDiv img{
宽度：100%；
身高：100%；
}

点击我

尝试先将任何空白图像设置为源，然后返回原始源图像。 就像这样：

function activate_gif(){
    document.getElementById("img1").src = "images/blank.jpg"     
    document.getElementById("img1").src = "https://i.imgur.com/Rsc0qOw.gif";

}

---

似乎IE 11不会真正重放（非循环）gif，如果它在缓存中，并且同一个src gif的所有实例实际上都是同步的…这似乎是IE的另一个。。。呃，让我们称之为怪癖

这里有一个（可悲的）解决办法。它确实会重新加载gif，但至少它会在后台预加载gif，以避免对用户xp造成太大影响。我将您的gif更改为2MO+1以显示背景加载

请注意，这应该只在IE上使用，因为其他浏览器可以很好地使用简单的解决方案

var oldNode=document.getElementById（“img1”），
src=oldNode.src+“？bust=“，
nextNode=oldNode.cloneNode（），
父节点=oldNode.parentNode；
nextNode.src=src+new Date（）.getTime（）；
函数激活_gifIE（）{
removeNode（）；
parent.appendChild（nextNode）；
oldNode=nextNode；
nextNode=oldNode.cloneNode（）；
nextNode.src=src+new Date（）.getTime（）；
}

.myDiv{
宽度：500px；
高度：300px；
}
.myDiv img{
宽度：100%；
身高：100%；
}

点击我

将GIF文件转换为视频并使用HTML标记可能更合适。见杰里米·瓦格纳的文章。但是，如果您想坚持使用GIF，您可以利用

XMLHttpRequest

，

Blob

和对象URL适当配置给定的COR和缓存相关HTTP头：

函数激活\u gif（）{
变量url=”https://i.imgur.com/Rsc0qOw.gif";
var img=document.getElementById（“img1”）；
var xhr=new XMLHttpRequest（）；
//如果浏览器具有带有url键的缓存项，则浏览器将接受缓存响应。
xhr.open（“GET”，url）；
xhr.responseType=“blob”；
xhr.onload=函数（）{
如果（xhr.status！=200）{
//抱怨。
返回；
}
var blobUrl=URL.createObjectURL（xhr.response）；
img.src=blobUrl；
setTimeout（函数（）{
//让浏览器在堆栈展开后显示blob和revoke blob。
revokeObjectURL（blobUrl）；
}，0）；//您可能需要增加大图像的延迟时间。
};
xhr.send（）；
}

.myDiv{
宽度：500px；
高度：300px；
}
.myDiv img{
宽度：100%；
身高：100%；
}

点击我

伙计，我能感觉到你的痛苦。我每天晚上都梦见一个没有IE的世界。嗨，谢谢你的回答。不幸的是，我尝试了你的解决方案，但结果没有任何改变，它在IE中仍然不起作用/我想试试看。在ie edge上，它像charmHi一样对我有效，谢谢你的回答！结果看起来很棒，我想这就是我想要的。如果我理解得很好，XMLHttpRequest会从缓存中获取图像（如果它存在的话）（这意味着没有额外的下载时间），然后创建一个新的URL对象，然后将其解释为一个新图像（这意味着它重新启动gif）。我说的对吗？是的，如果缓存条目存在并且是新的，则不会有网络请求。不过，从磁盘缓存加载也需要一些时间。虽然这个代码段可以在Firefox的测试页面上使用，但由于某些原因，它不能在堆栈溢出代码段中使用。但我可能会在其他浏览器中使用更简单、更高效的代码。你的代码片段在Chrome和IE上都适用。是的，我只使用IE和Edge实现了这个解决方案。它在我的应用程序中运行得非常好。非常感谢你的帮助！请参阅使用HTML

标记和相关链接的解决方案更新。