问题
On my page I have javascript that loads new content in <div id="content"></div> from other page located at: inc/content.php. I would like to know how can I show animated gif image loading.gif in <div id="content"></div> while new content gets loaded into it? and once loaded hide gif and show new conntent?
Thank You ))) Here is my code:
<html>
<head>
<script type="text/javascript" src="js/jquery-1.6.4.js"></script>
<script type="text/javascript">
function viewNext()
{
$("#content").load("inc/content.php");
}
</script>
</head>
<body>
<button id="nextfLuky" onClick="viewNext();return false;">Next fLuky</button>
<div id="content"></div>
</body>
</html>
content in inc/content.php page:
<div id="text">Hello</div>
回答1:
function viewNext(){
$('#content').html('<img src="loading.gif" />').load("inc/content.php");
}
When you use load() it will replace anything in the element, including the gif so you dont have to manually hide it.
回答2:
function viewNext()
{
$('#content').html('<img src="/images/loading.gif" />');
$("#content").load("inc/content.php");
}
This will do it.
回答3:
$('#content').append('<img id="delete_me_spinner2" src="/images/ajax-loader.gif" border="0" style="text-decoration: none" alt="Loading" />');
var y = $.post(.....)
.complete(function(data) {
$('#delete_me_spinner2').remove();
//check ajax went ok
});
来源：https://stackoverflow.com/questions/7769892/how-to-show-loading-gif-image-while-content-called-via-javascript-is-loading