Animated GIF in IE stopping

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.

Solution 1:

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:

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

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, and for some reason it is not affected by the ie animation issues.

Tested in Firefox, ie6, ie7 and ie8.

Solution 2:

old question, but posting this for fellow googlers:

Spin.js DOES WORK for this use case: http://fgnass.github.com/spin.js/

Solution 3:

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).

Solution 4:

Here's a jsFiddle that works just fine on form submit with method="post". The spinner is added on form submit event.

$("form").bind("submit", onFormSubmit);

function onFormSubmit() {
    setTimeout(showSpinner, 1);
}

function showSpinner() {
    $("body").append($('<img id="spinner" src="spinner.gif" alt="Spinner" />'));
}

See jsFiddle code here

Test it in your IE browser here

Solution 5:

I came upon this post, and while it has already been answered, felt I should post some information that helped me with this problem specific to IE 10, and might help others arriving at this post with a similar problem.

I was baffled how animated gifs were just not displaying in IE 10 and then found this gem.

Tools→Internet Options→Advanced→MultiMedia→Play animations in webpages

hope this helps.