如何在执行提交表单时显示加载 gif 表示 JQuery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8140946/
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 a loading gif mean while a submit form is being executed JQuery
提问by content01
I'm trying to show a simple spinner gif meanwhile a submit is being executed (it takes a bit because I have to establish some communications with providers via web services).
我试图在执行提交的同时显示一个简单的微调 gif（这需要一点时间，因为我必须通过 Web 服务与提供商建立一些通信）。
So, I have this:
所以，我有这个：
$('#gds_form').submit(function() {
var pass = true;
//some validations
if(pass == false){
return false;
}
$("body").prepend('<div class="ui-widget-overlay" style="z-index: 1001;"></div>');
$("body").prepend("<div id ='PleaseWait'><img src='/images/spinner.gif'/></div>");
return true;
});
the thing is, that the .gif doesn't show any animation, it's like it is frozen.
问题是，.gif 没有显示任何动画，就像它被冻结了一样。
Why?
为什么？
There's another way to implement this (notice that I'm not using AJAX and I don't want to)?
还有另一种实现方式（请注意，我没有使用 AJAX，也不想使用）？
Thank you.
谢谢你。
回答by James Johnson
Using the jQuery submitfunction, you can specify a loading image like this:
使用 jQuerysubmit函数，您可以像这样指定加载图像：
$('#form').submit(function() {
$('#wait').show();
$.post('/somepage.htm', function() {
$('#wait').hide();
});
return false;
});
回答by Challe
Have you tried loading the image on document ready, only having it hidden. Then display it in your function? This way, the image is already loaded and spinning.
您是否尝试在准备好文档时加载图像，只是将其隐藏。然后在你的函数中显示它？这样，图像已经加载并旋转。
$(document).ready(function() {
$("body").prepend('<div id="overlay" class="ui-widget-overlay" style="z-index: 1001; display: none;"></div>');
$("body").prepend("<div id='PleaseWait' style='display: none;'><img src='/images/spinner.gif'/></div>");
});
$('#gds_form').submit(function() {
var pass = true;
//some validations
if(pass == false){
return false;
}
$("#overlay, #PleaseWait").show();
return true;
});
回答by Jose Vega
The real issue with your implementation is how does the client side know when your request has completed. One of the reasons why Ajax is helpful is because we have a notion of states and therefore we can display a loader while the client is waiting for a response and remove the loader when the client receives a response.
您实现的真正问题是客户端如何知道您的请求何时完成。Ajax 有用的原因之一是因为我们有状态的概念，因此我们可以在客户端等待响应时显示加载器，并在客户端收到响应时移除加载器。
How are you going to determine when the communication with the web service is completed? You say that you don't want to use Ajax, but if you are going to want to query a service to determine whether your communication completed, you are probably seeing something that will require Ajax.
您将如何确定与 Web 服务的通信何时完成？您说您不想使用 Ajax，但是如果您想查询服务以确定您的通信是否完成，您可能会看到一些需要 Ajax 的东西。
回答by Hazza
Use .show() and .hide() to toggle the loading animation while it sends?
使用 .show() 和 .hide() 在发送时切换加载动画？
回答by Ben
I would the div on the page to start with, but with style='display:none'then stick a $('#PleaseWait').show()in your code when you want it to appear.
我会从页面上的 div 开始，但是当你想要它出现时，style='display:none'然后$('#PleaseWait').show()在你的代码中粘贴一个。
If you leave the display:noneoff you can edit see what it looks like without needing to submit the form again and again.
如果您display:none关闭，您可以编辑查看它的外观，而无需一次又一次地提交表单。
NB:you may want to wrap the overlay and the gifin a parent div for convenience.
注意：gif为了方便起见，您可能希望将覆盖层和 包装在父 div 中。
