Showing gif using jquery in IE
Right now I'm getting this strange behavior from IE where it's not showing my animated gif. I'm trying to show a loading gif during an AJAX request.
function changeToRecorded(){
$('#entries').fadeOut(200,function(){
$('#main').html('<img id="loadingGif" class="centered" src="./pictures/ajax-loader.gif"; />');
$.get("getData.php",{ status: "R" },requestCompleteRecorded);
});
}
changeToRecorded gets called on a mouse click on a particular . During this time (in IE) the loading gif doesn't show at all in . I'm not sure if has anything to do with using fadeOut but I don't see why it would because it doesn't get called until after the animation. It's the not the way the tag is written because I've copied and pasted that tag into the body of the HTML document and it displays perfectly fine in IE.
If anybody has a clue why this is happening I would a开发者_运维技巧ppreciate it.
Note: This works for pretty much every other browser in the world.
<html>
<head>
<link rel="stylesheet" href="themeSuggestion.css">
<script type="text/javascript" src="jQuery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(onDocumentReady);
function onDocumentReady(){
$('#Recorded').addClass('border').click(changeToRecorded);
$('#Pending').addClass('border').click(changeToPending);
$('#main').addClass('scroll');
$('#entries').addClass('main');
$('#loadingGif').hide();
}
function changeToRecorded(){
/*
$('#entries').fadeOut(30,function(){
$('#loadingGif').show();
$.get("getData.php",{ status: "R" },requestCompleteRecorded);
});
*/
$('#entries').html('');
$('#loadingGif').show();
$.get("getData.php",{ status: "R" },requestCompleteRecorded);
}
function changeToPending(){
/*
$('#entries').fadeOut(30,function(){
$('#loadingGif').show();
$.get("getData.php",{ status: "P" },requestCompletePending);
});
*/
$('#entries').html('');
$('#loadingGif').show();
$.get("getData.php",{ status: "P" },requestCompletePending);
}
function requestCompletePending(data){
$('#loadingGif').hide();
$('#entries').addClass('main');
$('#entries').html(data).fadeIn();
$('#theme').addClass('fixws');
$('#date').addClass('fixws');
}
function requestCompleteRecorded(data){
$('#loadingGif').hide();
$('#entries').addClass('main');
$('#entries').html(data).fadeIn();
}
</script>
</head>
<body>
<div id="Recorded">Recorded</div><div id="Pending">Pending</div>
<br/><br/>
<div id="main">
<img id="loadingGif" class="centered" src="./pictures/ajax-loader.gif"; />
<table id="entries"></table>
</div>
</body>
</html>
This may be because of the way you have approached the issue. You are using the callback function of the fadeOut method to insert some html. The problem is, that doesn't get inserted until after the server has finished serving the page to the client. You can insert the image tag, but IE doesn't load that image because it doesn't know it needs to get it from the server.
A better approach would be to put the gif into your markup. Use some css to hide it, then use the jquery fadeIn() method to show it when you want it visible, and the fadeOut() method to hide it when you need to.
加载中,请稍侯......
精彩评论