0

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;
    }
}

This seems to be working in Firefox + Chrome though.

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 :(

Jeremy W
  • 1,751
  • 6
  • 25
  • 33
user1231561
  • 2,879
  • 6
  • 32
  • 49
  • Can you create a jsfiddle or something, so we can play with it ? Then we'll have a minimum standalone code that exhibits the behaviour. – Cimbali Dec 16 '14 at 11:26
  • It's a gif that doesn't loop that you want to restart, right ? – Cimbali Dec 16 '14 at 11:58
  • Have you chance to control the image file delivery from server? Can you switch-off the cache, like: http://stackoverflow.com/questions/49547/making-sure-a-web-page-is-not-cached-across-all-browsers – Ruben Kazumov Dec 16 '14 at 20:05

2 Answers2

2

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.

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.

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.

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>
Cimbali
  • 5,241
  • 31
  • 52
0
...
tmpImgUrl = tmpImgUrl + "?random=" + Math.random().toString();
imgContainer.src = tmpImgUrl; 
...

The script will ask the server to deliver the image with url http://... /assets/myGIFanimation.gif?random=0.37928739409283748

Ruben Kazumov
  • 3,571
  • 2
  • 21
  • 37
  • I tried to do this. So in each new loop I would add the src again with a random integer at the end. For some reason I couldn't get this to work in IE – user1231561 Dec 23 '14 at 01:10