Question

我正在运行不同动画序列的循环，在某些时候我想添加一个GIF动画。将GIF附加到div第一次工作正常，但是在我的第二个循环中，我似乎无法“重新加载”GIF以在资源管理器中工作。

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中有效。

编辑1：我发现了在src末尾添加随机数的建议，但这会导致重新加载整个文件大小。看到这个gif动画是相当多的mbs，那就行不通了:(

Answer 1

如何重新加载gif，但是在下次想要显示它时预加载它？然后你就不必等待重装......但如果你有大图像并经常重新加载它们，你仍会破坏带宽，特别是在移动设备上可能会很糟糕。

也许你应该只为IE 使用这个脚本。无论如何，这适用于我在虚拟机中运行的IE11，我无法进行更多测试。

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

这是一段典型的代码片段，在互联网上只有一次随机gif播放。点击＆＃34;切换＆＃34;重新启动gif，即使在IE上也是如此。

＆＃13;
＆＃13;
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;
＆＃13;
<button id="zde">toggle !</button> <div id="zou"> </div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

...
tmpImgUrl = tmpImgUrl + "?random=" + Math.random().toString();
imgContainer.src = tmpImgUrl; 
...

该脚本将要求服务器使用网址http://... /assets/myGIFanimation.gif?random=0.37928739409283748

传递图像

在资源管理器中重新加载动画.gif文件并不适用于img.src =＆＃34;＆＃34;

2 个答案: