Animated GIF in IE stopping

Question

Hi,

Does anyone know a work around to make animated GIF's continue to be animated after you click a link or submit a form on the page your on in IE? This works fine in other browsers.

Thanks.

Answer 1

You could try reloading the gif or use a flash image instead.

Or you could save our eyes.

Answer 2

It's a known bug (limitation) of IE. You could use javascript to solve it. Just preload image and change source () of freezing image to that preloaded image on "onbeforeunload" action

Answer 3

Try this http://elliottback.com/wp/animated-gif-stops-javascript-click/

Answer 4

IE assumes that the clicking of a link heralds a new navigation where the current page contents will be replaced. As part of the process for perparing for that it halts the code that animates the GIFs. I doubt there is anything you can do about it (unless you aren't actually navigating in which case use return false in the onclick event).

Answer 5

The accepted solution did not work for me.

After some more research I came across this workaround, and it actually does work.

Here is the gist of it:

<script>
function showProgress() {
    var pb = document.getElementById("progressBar");
    pb.innerHTML = '<img src="./progress-bar.gif" width="200" height ="40"/>';
    pb.style.display = '';
}
</script>

and in your html:

<input type="submit" value="Submit" onclick="showProgress()" />
<div id="progressBar" style="display: none;"><img src="./progress-bar.gif" width="200" height ="40"/></div>

So when the form is submitted the img tag is inserted which for some reason it is not effected by the ie animation issues.

Tested in Firefox, ie6, ie7 and ie8.

Answer 6

"Or you could save our eyes."

I don't suppose it occurs to anyone that there may be a really important usability issue here -- that a small animated gif that shows the poor user that the google maps interface is trying to load something and that if they wait it will show up in a few seconds.

I hate this f*ing arrogance. No, you haven't thought of everything and you obviously haven't done much if you can't imagine a good reason for this or a million other things people have posted.

Answer 7

I tried the solution given by AnthonyWJones above by adding -

return false;

at the end of the script in the clicked link and it worked. Thanks!

Answer 8

Related to this I had to find a fix where animated gifs were used as a background image to ensure styling was kept to the stylesheet. A similar fix worked for me there too... my script went something like this (I'm using jQuery to make it easier to get the computed background style - how to do that without jQuery is a topic for another post):

var spinner = <give me a spinner element>

window.onbeforeunload = function() {
  bg_image = $(spinner).css('background-image');
  spinner.style.backgroundImage = 'none';
  spinner.style.backgroundImage = bg_image;
}

[EDIT] With a bit more testing I've just realised that this doesn't work with background images in IE8. I've been trying everything I can think of to get IE8 to render a gif animation wile loading a page, but it doesn't look possible at this time.