110
I encountered this problem when trying to show a loading gif while a form submit was processing. It had an added layer of fun in that the same onsubmit had to run a validator to make sure the form was correct. Like everyone else (on every IE/gif form post on the internet) I couldn't get the loading spinner to "spin" in IE (and, in my case, validate/submit the form). While looking through advice on http://www.west-wind.com I found a post by ev13wt that suggested the problem was "... that IE doesn't render the image as animated cause it was invisible when it was rendered." That made sense. His solution:
Leave blank where the gif would go and use JavaScript to set the source in the onsubmit function - document.getElementById('loadingGif').src = "path to gif file".
Here's how I implemented it:
<script type="text/javascript">
function validateForm(form) {
if (isNotEmptyid(form.A)) {
if (isLen4(form.B)) {
if (isNotEmptydt(form.C)) {
if (isNumber(form.D)) {
if (isLen6(form.E)){
if (isNotEmptynum(form.F)) {
if (isLen5(form.G)){
document.getElementById('tabs').style.display = "none";
document.getElementById('dvloader').style.display = "block";
document.getElementById('loadingGif').src = "/images/ajax-loader.gif";
return true;
}
}
}
}
}
}
}
return false;
}
&Jquery:
$("#WhereYouWantTheImageToAppear").html('<img src="./Animated.gif" />');
Just had a similar issue. These worked perfectly for me.
$('#myElement').prepend('<img src="/path/to/img.gif" alt="My Gif" title="Loading" />');
$('<img src="/path/to/img.gif" alt="My Gif" title="Loading" />').prependTo('#myElement');
Another idea was to use jQuery's .load(); to load and then prepend the image.
Works in IE 7+