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

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

从这篇文章中，我尝试刷新innerHTML内容：

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上却不能运行。

- Reyedy

---

兄弟，我能感受到你的痛苦。我每晚都会梦见一个没有IE的世界。 - Bálint Budavölgyi

Answer 1

将GIF文件转换成视频并使用 <video> HTML标签可能更为恰当。请参阅Jeremy Wagner的 Replace Animated GIFs with Video文章。但是，如果您想坚持使用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页面
• MDN上的URL.createObjectURL()页面
• MDN上的跨域资源共享（CORS）页面
• 由Ilya Grigorik撰写的HTTP缓存文章。
• StackOverflow上的HTML5视频JavaScript控件-重新启动视频讨论

- Leonid Vasilev

---

嗨，感谢您的回答！结果看起来很棒，我想那就是我要找的。如果我理解正确，XMLHttpRequest会从缓存中获取图像（这意味着没有额外的下载时间），然后创建一个新的URL对象，该对象被解释为新的图像（这意味着它重新启动gif）。我理解得对吗？ - Reyedy

是的，如果缓存条目存在且仍然新鲜，就不会发出网络请求。但从磁盘缓存中加载也需要一些时间。虽然这段代码片段在我的 Firefox 测试页面上可以工作，但在 Stack Overflow 代码片段中却无法工作，原因不明。但在其他浏览器中，我可能会使用更简单、更高效的代码。 - Leonid Vasilev

你的代码片段在Chrome和IE上都能正常工作。我只在IE和Edge上实现了这个解决方案，但它在我的应用程序上完美地运行。非常感谢你的帮助！ - Reyedy

请查看使用HTML <video>标签及相关链接的解决方案更新。 - Leonid Vasilev

Answer 2

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

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

}

- iStepashka

---

你好，感谢你的回答。不幸的是，我尝试了你的解决方案，但结果没有改变，它在IE中仍然不能工作... :/ - Reyedy

值得一试。在IE Edge上，它对我非常有效。 - iStepashka

Answer 3

看起来IE 11实际上不会重放（非循环）gif，如果它已经在缓存中，并且所有相同源的gif实际上是同步的...这似乎是IE的另一个...嗯，让我们称之为“怪癖”。

这里有一个（悲伤的）解决方法。它确实重新加载gif，但至少它在后台预加载它，以便对用户体验没有太大影响。我将您的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的随机时间着陆，因为似乎无法让它重新播放...

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

- Boris