jQuery 单击按钮时显示“加载”动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15288002/
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
Show "loading" animation on button click
提问by frazman
I want to do something very simple. I have one button in my page.
我想做一些非常简单的事情。我的页面中有一个按钮。
<form action="/process" method="POST">
<input class="btn btn-large btn-primary" type="submit" value='Analyze Topics'>
</form>
Now what I want is when the user presses this submit button. It shows that "loading" gif animation until it gets the response from server.
现在我想要的是当用户按下这个提交按钮时。它显示“加载”gif 动画，直到它从服务器获得响应。
But I have been struggling since long time.
但我已经挣扎了很长时间。
How do I implement this?
我该如何实施？
回答by bipen
If you are using ajax then (making it as simple as possible)
如果您正在使用 ajax，那么（使其尽可能简单）
Add your loading gif image to html and make it hidden (using style in html itself now, you can add it to separate CSS):
<img src="path\to\loading\gif" id="img" style="display:none"/ >Show the image when button is clicked and hide it again on success function
$('#buttonID').click(function(){ $('#img').show(); //<----here $.ajax({ .... success:function(result){ $('#img').hide(); //<--- hide again } }
将加载的 gif 图像添加到 html 并使其隐藏（现在使用 html 本身的样式，您可以将其添加到单独的 CSS）：
<img src="path\to\loading\gif" id="img" style="display:none"/ >单击按钮时显示图像并在成功功能时再次隐藏它
$('#buttonID').click(function(){ $('#img').show(); //<----here $.ajax({ .... success:function(result){ $('#img').hide(); //<--- hide again } }
Make sure you hide the image on ajax error callbacks too to make sure the gif hides even if the ajax fails.
确保你也隐藏了 ajax 错误回调中的图像，以确保即使 ajax 失败也隐藏 gif。
回答by Dakait
try
尝试
$("#btnId").click(function(e){
e.preventDefault();
//show loading gif
$.ajax({
...
success:function(data){
//remove gif
},
error:function(){//remove gif}
});
});
EDIT: after reading the comments
编辑：阅读评论后
in case you decide against ajax
如果你决定反对 ajax
$("#btnId").click(function(e){
e.preventDefault();
//show loading gif
$(this).closest('form').submit();
});
回答by Rajat Modi
The best loading and blocking that particular div for ajax call until it succeeded is Blockui
为 ajax 调用加载和阻止该特定 div 直到成功的最佳方法是 Blockui
go through this link http://www.malsup.com/jquery/block/#element
通过此链接http://www.malsup.com/jquery/block/#element
example usage:
用法示例：
<span class="no-display smallLoader"><img src="/images/loader-small.png" /></span>
script
脚本
jQuery.ajax(
{
url: site_path+"/restaurantlist/addtocart",
type: "POST",
success: function (data) {
jQuery("#id").unblock();
},
beforeSend:function (data){
jQuery("#id").block({
message: jQuery(".smallLoader").html(),
css: {
border: 'none',
backgroundColor: 'none'
},
overlayCSS: { backgroundColor: '#afafaf' }
});
}
});
hope this helps really it is very interactive.
希望这真的有帮助它是非常互动的。
回答by Angel
$("#btnId").click(function(e){
e.preventDefault();
$.ajax({
...
beforeSend : function(xhr, opts){
//show loading gif
},
success: function(){
},
complete : function() {
//remove loading gif
}
});
});
回答by Mohamed.Abdo
//do processing
$(this).attr("label", $(this).text()).text("loading ....").animate({ disabled: true }, 1000, function () {
//original event call
$.when($(elm).delay(1000).one("click")).done(function () {//processing finalized
$(this).text($(this).attr("label")).animate({ disabled: false }, 1000, function () {
})
});
});
回答by Anil Baggio
I know this a very much late reply but I saw this query recently And found a working scenario,
我知道这是一个很晚的回复，但我最近看到了这个查询并找到了一个工作场景，
OnClick of Submit use the below code:
提交的 OnClick 使用以下代码：
$('#Submit').click(function ()
{ $(this).html('<img src="icon-loading.gif" />'); // A GIF Image of Your choice
return false });
To Stop the Gif use the below code:
要停止 Gif，请使用以下代码：
$('#Submit').ajaxStop();
$('#Submit').ajaxStop();
