我正在尝试在用户单击时重新启动 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
来自 this SO question ,我尝试了以下 JS 代码,以“强制”刷新缓存:
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 上运行。
最佳答案
将 GIF 文件转换为视频并使用 <video>
可能更合适HTML 标签。参见 Replace Animated GIFs with Video杰里米瓦格纳的文章。但如果你想坚持使用 GIF,你可以使用 XMLHttpRequest
, Blob
给定 CORS 和缓存相关 HTTP header 的对象 URL 已适当配置:
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关于 StackOverflow 的讨论
关于javascript - 在 IE11 中重新启动 gif 而无需重新加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50152034/