在按钮单击时显示"加载"动画

Question

我想做一些非常简单的事情.我的页面中有一个按钮.

<form action="/process" method="POST">
   <input class="btn btn-large btn-primary" type="submit" value='Analyze Topics'>
    </form>

现在我想要的是用户按下此提交按钮.它显示"加载"gif动画,直到它从服务器获得响应.

但是我长期以来一直在苦苦挣扎.

我该如何实现？

Answer 1

如果你正在使用ajax(尽可能简单)

1. 将你的加载gif图像添加到html并使其隐藏(现在使用html中的样式,你可以将它添加到单独的CSS):

   <img src="path\to\loading\gif" id="img" style="display:none"/ >
   

2. 单击按钮时显示图像,并在成功功能上再次隐藏它

   $('#buttonID').click(function(){
     $('#img').show(); //<----here
     $.ajax({
       ....
      success:function(result){
          $('#img').hide();  //<--- hide again
      }
   }
   

确保你在ajax错误回调上隐藏图像,以确保即使ajax失败也会隐藏gif.

Answer 2

尝试

$("#btnId").click(function(e){
 e.preventDefault();
 //show loading gif

 $.ajax({
  ...
  success:function(data){
   //remove gif
  },
  error:function(){//remove gif}

 });
});

编辑:阅读评论后

如果你决定反对ajax

$("#btnId").click(function(e){
     e.preventDefault();
     //show loading gif
     $(this).closest('form').submit();
});

Answer 3

最好的加载和阻止ajax调用的特定div直到成功为止Blockui

请访问此链接http://www.malsup.com/jquery/block/#element

示例用法:

 <span class="no-display smallLoader"><img src="/images/loader-small.png" /></span>

脚本

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' } 
    });

}
});

希望这有助于它真正具有互动性.