Affects: IE6, IE7, IE8
In general IE has no issues rendering Animated GIF images... however with all this Web 2.0 stuff going on where animated "spinners" are used to indicate "activity" in AJAX applications a bug has started to become exposed.
It is common to have a pre-loaded animated GIF image rendered as part of a page, that has its style (or a wrapping element) set to display:none;
Then whenever it is needed, simply setting the display to 'inline','block' or even '' will then display the animated image.
The problem is, that sometimes IE refuses to animate the image. It just sits there in a still frame as if there were no animation sequence.
It appears to be some sort of threading/race condition and is most obvious if right after setting the display back to a "visible" state the location.href is changed, or the form is submitted.
Its one of those odd bugs that doesn't always happen, but appears "glitchy" when it does.
Example:
<img src="img/busy.gif" width="16" height="16" border="0" style="display:none;"/>
<script type="text/javascript">
var busy = document.getElementById('busyicon');
busy.style.display = 'inline';//or try '', or 'block'
document.forms[0].submit();
</script>
Known Workarounds: Some kind of sorta? There are various speculations on this (and I'm opening comments on this to bring in more), but anything that attempts to reload the src of the animation afterwards, or in another thread appears to help.
Example Workaround Code:
<script type="text/javascript">
//spawn another thread to show activity
setTimeout('showSpinner',150);//spawns another thread to kick off after the submit
document.forms[0].submit();
function showSpinner(){
var busy = document.getElementById('busyicon');
busy.style.display = 'inline';//or try '', or 'block'
}
</script>
Related Issues: None.
Submit a bug
Posts
3 comments:
Hello,
I have the same problem.
I use JSF (Apache) with tomahawk and sandbox.
When I put the animated gif onto the main page, it animates OK. When I put it into the modal dialog, that is shown by <s:modalDialog... it does not animated in IE (FF is OK).
The example resolution does not help to me. If you have any other idea, please leave a comment.
Thanks Tomas. SFME
Hello again,
It works when I set refreshing the picture by this code from
http://www.javabeat.net/articles/105-jsf-interview-questions-2.html
function gowait() {
document.getElementById("main").style.visibility="hidden";
document.getElementById("wait").style.visibility="visible";
window.setTimeout('showProgress()', 500);
}
function showProgress(){
var wg = document.getElementById("waitgif");
wg.src=wg.src;
}
and
onclick="gowait()" ...
Tomas
The problem with animated gifs in IE is that they have to be added to the DOM when they are visible, otherwise they are not rendered as such. See http://www.larshemel.com/forum/animated_gif_problems_ie for detailed info.
So, it actually is plain simple. Add the code at the moment you want it to be displayed.
Post a Comment