jQuery 如何在等待 AJAX 响应时加载图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16881626/
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 do I load an image while waiting for AJAX response?
提问by Chris
I was wondering if I could get some pointers. I am trying to use a loading gif while getting a response from an ajax request. The issue I am running into is that it will not display the gif while sending an email.
我想知道是否可以得到一些指示。我正在尝试在从 ajax 请求中获取响应时使用加载 gif。我遇到的问题是它在发送电子邮件时不会显示 gif。
I have looked at several pages on here to try and find a solution but none of them seems to be working. These are the pages I have looked at: Loading gif image while jQuery ajax is runningand Display loading image while post with ajaxand Show loading image while $.ajax is performed
我查看了此处的几页以尝试找到解决方案，但它们似乎都不起作用。这是我看过的网页：而jQuery的AJAX运行加载GIF图像和显示加载图片，同时用后阿贾克斯和在执行显示加载图片$阿贾克斯
I have used the following code to try and achieve this:
我已经使用以下代码来尝试实现这一目标：
$("#loading").bind("ajaxStart", function(){
$(this).show();
}).bind("ajaxStop", function(){
$(this).hide();
});
This does not show the gif, I have also tried the following:
这不显示 gif，我还尝试了以下操作：
$.ajax({
type: "POST",
url: "contact1.php",
data: dataString,
beforeSend: loadStart,
complete: loadStop,
success: function() {
$('#form').html("<div id='msg'></div>");
$('#msg').html("Thank you for your email. I will respond within 24 hours. Please reload the page to send another email.")
},
error: function() {
$('#form').html("<div id='msg'></div>");
$('#msg').html("Please accept my apologies. I've been unable to send your email. Reload the page to try again.")
}
});
return false;
});
function loadStart() {
$('#loading').show();
}
function loadStop() {
$('#loading').hide();
}
I have also tried putting $("#loading").show() before the ajax request and unsing .hide() in the success and error functions. I still get nothing showing.
我还尝试在 ajax 请求之前放置 $("#loading").show() 并在成功和错误函数中取消 .hide() 。我仍然没有任何显示。
Thanks in advance
提前致谢
回答by pala?н
Actually you need to do this by listening ajaxStart and Stop events and binding it to the document:
实际上，您需要通过侦听 ajaxStart 和 Stop 事件并将其绑定到document：
$(document).ready(function () {
$(document).ajaxStart(function () {
$("#loading").show();
}).ajaxStop(function () {
$("#loading").hide();
});
});
$(document).ajaxStart(function() {
$("#loading").show();
}).ajaxStop(function() {
$("#loading").hide();
});
$('.btn').click(function() {
$('.text').text('');
$.ajax({
type: "GET",
dataType: 'jsonp',
url: "https://api.meetup.com/2/cities",
success: function(data) {
$('.text').text('Meetups found: ' + data.results.length);
}
});
});#loading { display: none; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn">Click Me!</button>
<p class="text"></p>
<div id="loading">
<!-- You can add gif image here
for this demo we are just using text -->
Loading...
</div>