<rant>
In all my experiences in my life as a geek, I have found few things more frustrating than developing something for any version of Internet Explorer (please hold your shouts of agreement for the end). Internet Explorer 5 never really existed (did the internet exist then even?), Internet Explorer 6 was a complete atrocity, Internet Explorer 7 I am pretty sure caused the suicide rate amongst us geeks to go up significantly, and Internet Explorer 8, while better than its predecessors, only caused a few geeks to become severely dependent on mind-altering drugs to help them cope with the frustrations of life (or maybe just web development for IE).
</rant>You may now cheer...
Now, down to business. On the topic of Internet Explorer doing things differently from the rest of the world simply for the sake of it (hey look, they're taking after Apple), I have recently experienced a very frustrating problem with animated gifs. Referring to my previous post about the file uploader, the client I was developing that for wanted an animation icon for the upload so their customers didn't think the page had frozen. Sounds like a simple task, no?
The problem can be described as this: When a postback event occurs (ie: clicking a link or submit button), Internet Explorer freezes all animated gifs on the page.
To explain how I fixed this, I essentially placed an animated 'rotating circle' on the page which was hidden until the onSubmit() function was called. Here's the code for the image while it was hidden.
<img src="./images/loading.gif" id="loader" style="visibility:hidden;" />Annnd here's the code for the animation problem fix as well as the code that changes the image visibility.
function showLoader(){//*** Reload the image for IE ***document.getElementById('loader').src='./images/loader.gif';//*** Let's make the image visible ***document.getElementById('loader').style.visibility = 'visible';
Note that this is not needed for any browsers other than Internet Explorer (any that I know of at least). Firefox, Google Chrome, and Safari all ran the animated gif image during postback without freezing it.
To explain how the fix works, when a postback occurs in Internet Explorer, it stops all animations on the page, as mentioned. The trick to fixing this is to reload the animated gifs when the postback occurs. In the example this occurs in the first line of the JavaScript function, (document.getElementById('loader').src='./images/loader.gif');. Right there we just re-set the source for the object to the source for the same object on postback.
That's how it works. Any thoughts? Criticism? Motions to boycott Internet Explorer 7?
