单击按钮时显示“加载”动画

Posted 2023-03-05

【中文标题】单击按钮时显示“加载”动画

【英文标题】：Show "loading" animation on button click

【发布时间】：2013-02-23 15:26:58

【问题描述】：

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

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

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

但我一直在苦苦挣扎。

我该如何实现？

【问题讨论】：

你在使用 ajax 吗？还是只是张贴表格？？

我也可以使用 ajax...但现在就是这样。

Jquery Ajax Loading image 的可能重复项

如果我发布表单，那么如何加载图像？

访问：this link，你会得到帮助

【参考方案1】：

试试

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

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

 );
);

编辑：阅读 cmets 后

如果你决定不使用 ajax

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

【参考方案2】：

如果您使用的是 ajax，那么（尽可能简单）

将加载的 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
   

确保在 ajax 错误回调中也隐藏图像，以确保即使 ajax 失败，gif 也会隐藏。

【讨论】：

你应该使用完整的回调来隐藏图像，而不是在两个地方调用它。

【参考方案3】：

$("#btnId").click(function(e)
      e.preventDefault();
      $.ajax(
        ...
        beforeSend : function(xhr, opts)
            //show loading gif
        ,
        success: function()

        ,
        complete : function() 
           //remove loading gif
        
    );
);

【参考方案4】：

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


);

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

【参考方案5】：

            //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 () 
                    )
                );
            );

【参考方案6】：

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

提交的 OnClick 使用以下代码：

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

要停止 Gif，请使用以下代码：

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