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

Question

当用户单击它时，我正在尝试使gif重新启动，而无需重新加载它(我的gif太重了，我实际上为我的应用程序预加载了它(。我当前的代码在Chrome和所有"现代浏览器"上都可以完美运行，但是我也需要在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

从这个SO问题中，我尝试了以下JS代码来"强制"缓存刷新：

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

结果：没有成功，它与我的原始代码完全没有不同的效果。

尝试 2

从这篇文章中，我试图刷新内部HTML内容：

function activate_gif(){
document.getElementById("img1").style.display = '';
document.getElementById("img1").innerHTML = document.getElementById("img1").innerHTML;
}

结果：IE没有变化，并且在其他浏览器中停止工作，所以我想它触发了控制台错误。

尝试 3

从这个SO问题中，我尝试使用解决方案的简化版本，基本上是通过在其源URL中添加随机后缀来强制再次加载图像：

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上不起作用。

Answer 1

将 GIF 文件转换为视频并使用 HTML 标签可能更合适<video>。请参阅杰里米·瓦格纳(Jeremy Wagner(的文章将动画GIF替换为视频。但是如果你想坚持使用 GIF，你可以利用XMLHttpRequest、Blob和对象 URL，给定 CORS 和缓存相关的 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>

您还可以使用浏览器检测在其他用户代理中使用更高效、更简单的代码。

有关更多信息，请查看：

• MDN 上的 XMLHttpRequest.responseType 页面
• URL.createObjectURL(( page on MDN
• MDN 上的跨源资源共享 (CORS( 页面
• Ilya Grigorik的HTTP Caching文章。
• HTML5 视频 JavaScript 控件 - 在 StackOverflow 上重新开始视频讨论

Answer 2

尝试首先将任何空白图像设置为源图像，然后取回原始源图像。 诸如此类：

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

Answer 3

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

这是一个(悲伤的(解决方法。它确实重新加载了 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>

我已经看到了诸如这个和那个的解决方法，但它们涉及循环 gif，并在它们前面覆盖一个静止帧，或用它替换它们。同样在 IE 11 上，您将不得不满足于用户在 gif 中随机登陆，因为您似乎无法让它重播......

无论如何，希望它有所帮助。