在資源管理器中重新加載動畫.gif不適用於img.src =””

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不同的新副本預加載圖像來替換刪除的項目。

這是一個典型的代碼片段，在Internet上僅播放一次隨機gif。 單擊“切換”將重新啟動gif，即使在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> 

Answer 2

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

該腳本將要求服務器提供帶有URL http://... /assets/myGIFanimation.gif?random=0.37928739409283748的圖像