Reanimation « Developers blog

Reanimation

Christoph @ March 30, 2009
Filed under: Code, Development — Tags: animated gif, Internet Explorer, javascript

To make our user interface more shiny we recently decided to use animated gifs in a couple of places. Especially when using ajax to reload some areas of the page we want to show a spinning wheel . For the user it feels more like something is going on (something is beeing processed) instead of having some kind of frozen screen. But with Internet Explorer it is not done with just placing an animated gif in the page. IE stops animating the gif in a couple of scenarios. Here you can see some hacks to convince IE to animated the gifs again:

IE stops animating the gifs on page submit. Here is the code to reanimate the gif:

function refreshAnimatedWaitGifForIE() {
var waitImg = newWin.document.getElementById("emptyWaitImg");
waitImg.src = waitImg.src;
}

At another place just resetting the image source did not work. A frozen gif was shown. I had to change the image source to dupe Internet Explorer:

function refreshAnimatedWaitGifForIE() {
var currentMillis = new Date().getTime();
var waitImg = newWin.document.getElementById("emptyWaitImg");
var waitImgSrc = waitImg.src;
var index = waitImgSrc.lastIndexOf(‘?’);
if (index != -1) {
waitImgSrc = waitImgSrc.substring(0, index);
}
waitImg.src = waitImgSrc + "?IEanimatedGifHack=" + currentMillis;
}

Another situation – IE needs another hack to reanimate the gif:

function showInfoMessage() {
setTimeout("_showInfoMessage()", 0);
}
function _showInfoMessage() {
…
}

Here the call of a method which sets some overlay screen to visible has to be called via “setTimeout(…)” to execute the call asynchronous. I don´t know why, but it fixes the problem.

Perhaps this will be fixed by Microsoft in some of the next versions of the Internet Explorer ….?!

Comments (1)