Javascript 在 jQuery ajax 运行时加载 gif 图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4448955/
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
Loading gif image while jQuery ajax is running
提问by Alan Whitelaw
I am trying to show a loading image while my ajax call is running, however using the beforeSendattribute is not changing my result area.
我试图在我的 ajax 调用运行时显示加载图像，但是使用该beforeSend属性不会改变我的结果区域。
$.ajax({
url: "/answer_checker.php",
global: false, type: "POST",
data: ({...clipped...}),
cache: false,
beforeSend: function() {
$('#response').text('Loading...');
},
success: function(html) {
$('#response').html(html);
}
}
Thanks in advance.
提前致谢。
采纳答案by Alan Whitelaw
I have a solution, it may not be the best way to do it but it has worked in this case.
我有一个解决方案，它可能不是最好的方法，但它在这种情况下有效。
$('input').keyup(function () {
$('#response').text('loading...');
$.ajax({
url: "/answer_checker.php",
global: false, type: "POST",
data: ({...clipped...}),
cache: false,
success: function(html) {
$('#response').html(html);
}
});
});
By setting the resonce content before calling the ajax function it remains showing the loading text until the ajax call updates the same content.
通过在调用 ajax 函数之前设置共振内容，它会一直显示加载文本，直到 ajax 调用更新相同的内容。
Thanks to everyone who took the time to answer.
感谢所有花时间回答的人。
Alan
艾伦
回答by ackqpunk
I had a similar problem. To resolve my issue, I replaced the .text, in the beforeSend section, with .html and created a html tag to insert into the element that holds my status. The success function did not replaced the content created by the .text() function but it did replace content created by the .html() function.
我有一个类似的问题。为了解决我的问题，我用 .html 替换了 beforeSend 部分中的 .text 并创建了一个 html 标签以插入到保存我的状态的元素中。success 函数没有替换由 .text() 函数创建的内容，但它确实替换了由 .html() 函数创建的内容。
$.ajax({
url: "/answer_checker.php",
global: false, type: "POST",
data: ({...clipped...}),
cache: false,
beforeSend: function() {
$('#response').html("<img src='/images/loading.gif' />");
},
success: function(html) {
$('#response').html(html);
}
}
回答by Greg
You arewere missing a comma after cache: false
你在后面少了一个逗号cache: false
回答by Ghyath Serhal
You can also use the following:
您还可以使用以下内容：
$('#tblLoading').ajaxStart(function() { $(this).show(); });
$('#tblLoading').ajaxComplete(function() { $(this).hide(); });
