时间戳

首页 > 解决方案 > 重新启动 gif 而不在 IE11 中重新加载它

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

问题描述

我试图在用户单击它时重新启动 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 question中，我尝试了以下 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 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 上。

标签： javascripthtmlinternet-explorergif

解决方案

<video>将 GIF 文件转换为视频并使用HTML 标签可能更合适。请参阅Jeremy Wagner 的用视频文章替换动画 GIF 。但是，如果您想坚持使用 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>

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

欲了解更多信息检查：

推荐阅读