在Explorer中重新加载动画.gif不适用于img.src ="" [英] Reloading animated .gif in explorer doesn't work with img.src=""

问题描述

我正在运行不同动画序列的循环，有时我想添加一个GIF动画. 第一次将GIF附加到div时效果很好，但是在第二个循环中，我似乎无法重新加载" GIF以便在资源管理器中工作.

Im running a loop of different animation sequences and at some point I want to add a GIF animation. Appending the GIF to a div works fine the first time, however in my second loop I can't seem to get "reloading" of the GIF to work in Explorer.

function toggleGifAnimation() {
    if(loopCount == 1) { //in my first loop I create the img and append it to the HTML
        imgContainer = document.createElement("img");
        imgUrl = "assets/myGIFanimation.gif";
        imgContainer.src = imgUrl;

        myDiv.appendChild(imgContainer);
        myDiv.style.display = "block";
    } else { //each other loop I try to re-use and "reload"
        //THIS DOESNT SEEM TO WORK IN EXPLORER
        imgContainer.src = "";
        imgContainer.src = imgUrl;
    }
}

这似乎可以在Firefox + Chrome中使用.

This seems to be working in Firefox + Chrome though.

我发现了在src末尾添加随机数的建议，但是这将导致重新加载整个文件大小.而且看到这个gif动画相当多mbs，那么那是行不通的:(

EDIT 1: I've found suggestions on adding a random number at the end of the src, however that will cause reload of the entire file size again. And seeing this gif animation is quite a few mbs, then that won't work :(

推荐答案

如何重新加载gif，但是要在下次显示时预加载它?这样一来，您不必等待重新加载...但是，如果您有大图像并经常重新加载它们，则仍然会破坏带宽，这可能是不好的，尤其是在移动设备上.

How about reloading the gif, but preloading it for the next time you want to show it ? Then you wouldn't have to wait on reloading... but you would still destroy the bandwidth if you have big images and reload them often, could be bad especially on mobile devices.

也许您应该将此脚本仅用于IE .无论如何，这可以在我在虚拟机中运行的IE11上运行，我无法真正进行更多测试.

Maybe you should use this script only for IE. Anyway, this works on the IE11 I run in my virtual machine, I can't really test many more.

基本上，您具有图像对象，在图像对象的URL上附加了随机值和/或增加值，以强制重新加载.切换时，将div中的元素替换为另一个元素.然后，您可以通过用相同图像的新副本预加载图像来替换已删除的项目，但是要使用不同的随机网址.

Basically, you have image objects, to whose URL you append random and/or increasing values, in order to force reloading. When you toggle, you replace the element that is in the div with the other one. Then you replace the removed item by preloading the image with a new copy of the same image but different randomized url.

这是一个典型的代码片段，在Internet上仅播放一次随机gif.单击切换"将重新启动gif，即使在IE上也是如此.

Here's a typical snippet of code with a random gif on the internet that plays only once. Clicking "toggle" restarts the gif, even on IE.

var imgUrl = "http://i.imgur.com/oZqny.gif"
var myDiv = document.getElementById("zou");
myDiv.style.display = "block";
var loopCount = 1;

// against caching : load= between page loads, loop= between clicks on "toggle"
imgUrl += "?load=" + new Date().getTime() + "&loop=";
var imgs = [new Image(), new Image()];
imgs[0].src = imgUrl + (loopCount - 1);
imgs[1].src = imgUrl + loopCount;

function toggleGifAnimation() {
  if (loopCount == 1) {
    myDiv.appendChild(imgs[loopCount % 2]);
  } else {
    myDiv.replaceChild(imgs[loopCount % 2], imgs[(loopCount + 1) % 2]);
  }
  loopCount++;
  imgs[loopCount % 2] = new Image();
  imgs[loopCount % 2].src = imgUrl + loopCount;
}

document.getElementById("zde").onclick = toggleGifAnimation;

<button id="zde">toggle !</button>
<div id="zou">
</div>

这篇关于在Explorer中重新加载动画.gif不适用于img.src =""的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！