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

Question

我正在尝试在用户单击时重新启动 gif，而不必重新加载它（我的 gif 太重了，我实际上为我的应用程序预加载了它）。我当前的代码在 Chrome 和所有 "modern browsers" 上完美运行，但是 我需要它在 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代码，要"force"缓存去刷新：

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开始，我尝试使用解决方案的简化版本，基本上是通过向其源添加随机后缀来强制再次加载图像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

尝试先将任何空白图像设置为源图像，然后取回原始源图像。像那样:

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

}

Answer 2

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

我见过 this one and that one 等变通方法，但它们涉及循环 gif，并在它们前面覆盖静止帧，或用静止帧替换它们。同样在 IE 11 上，您将不得不接受用户在 gif 中随机登陆的情况，因为您似乎无法重播它……

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

Answer 3

将 GIF 文件转换为视频并使用 Jeremy Wagner 的 <video> HTML tag. See Replace Animated GIFs with Video 文章可能更合适。但如果你想坚持使用 GIF，你可以利用 XMLHttpRequest、Blob 和 object URL，因为 CORS 和缓存相关的 HTTP headers 已适当配置：

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>

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

更多信息请查看：

XMLHttpRequest.responseType MDN 页面
URL.createObjectURL() MDN 页面
Cross-Origin Resource Sharing (CORS) MDN 上的页面
HTTP Caching Ilya Grigorik 的文章。
HTML5 video javascript controls - restart video 关于 Whosebug 的讨论

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

Restart gif without reloading it in IE11

html

javascript

internet-explorer

gif

到目前为止我尝试了什么