我正在尝试使用户在点击GIF时无需重新加载即可重新启动它,因为我的GIF太重了(我实际上为我的应用程序预载了它)。 我目前的代码在Chrome和所有“现代浏览器”上都可以完美运行,但是我需要它在IE11上也能够运行,这就是问题所在。
以下是一个样例代码,在Chrome上运行良好,但在IE11上却不行:
您也可以在此jsFiddle中找到它:https://jsfiddle.net/c6hodyh2/3/
您可以在此处找到另一个(不)工作的问题示例(适用于Chrome,无法在IE中使用):https://codepen.io/InSightGraphics/pen/CAlci
我尝试了以下方法:
尝试1
从此SO问题中,我尝试了以下JS代码,以“强制”刷新缓存:
以下是一个样例代码,在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>
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上却不能运行。