30

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

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

现在我想要的是当用户按下这个提交按钮时。它显示“加载” gif 动画,直到它从服务器获得响应。

但我一直在挣扎很久。

我该如何实施?

4

6 回答 6

39

如果您使用的是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 也会隐藏。

于 2013-03-08T06:30:37.997 回答
7

在成功之前,最好的加载和阻止 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' } 
    });

}
});

希望这真的很有帮助,它非常互动。

于 2013-03-08T06:53:27.943 回答
7

尝试

$("#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();
});
于 2013-03-08T06:27:31.590 回答
3
$("#btnId").click(function(e){
      e.preventDefault();
      $.ajax({
        ...
        beforeSend : function(xhr, opts){
            //show loading gif
        },
        success: function(){

        },
        complete : function() {
           //remove loading gif
        }
    });
});
于 2013-03-08T06:52:35.693 回答
0
            //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 () {
                    })
                });
            });
于 2014-03-18T17:33:08.893 回答
0

我知道这是一个非常晚的回复,但我最近看到了这个查询并找到了一个工作场景,

OnClick 的提交使用以下代码:

 $('#Submit').click(function ()
 { $(this).html('<img src="icon-loading.gif" />'); // A GIF Image of Your choice
 return false });

要停止 Gif,请使用以下代码:

$('#Submit').ajaxStop();

于 2017-05-25T09:59:03.193 回答