jQuery 如何在加载通过 javascript 调用的内容时显示正在加载的 gif 图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7769892/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show loading gif image while content called via javascript is loading?
提问by Ilja
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.gifin <div id="content"></div>while new content gets loaded into it? and once loaded hide gif and show new conntent?
在我的网页我的JavaScript，在加载新的内容<div id="content"></div>与其他网页地址为：inc/content.php。我想知道如何loading.gif在<div id="content"></div>加载新内容时显示动画 gif 图像？一旦加载隐藏 gif 并显示新内容？
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:
inc/content.php 页面中的内容：
<div id="text">Hello</div>
回答by 472084
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.
当您使用 load() 时，它将替换元素中的任何内容，包括 gif，因此您不必手动隐藏它。
回答by Senad Me?kin
function viewNext()
{
$('#content').html('<img src="/images/loading.gif" />');
$("#content").load("inc/content.php");
}
This will do it.
这将做到。
回答by max4ever
$('#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
});
