如何在表单加载时显示加载器？

Question

我有一个PHP页面。提交表格和获得回复的等待时间每次都是不同的。这取决于我提交的号码数据。

我如何可以显示程序的时候，这种形式提交，并阻止它完成后？

P.S：我发现了一些不错的CSS装载机：https://projects.lukehaas.me/css-loaders。

Answer 1

(function($){ 
    $(function(){ 
     $('#form').submit(function(event){ 
      event.preventDefault(); 
      var loading_image = $('#form_loading_img'), 
      data = $(this).serialize(), 
      form = $(this); 
      loading_image.show(); 
      $.ajax({ 
       url: form.attr('action'), 
       type: form.attr('method'), 
       data: data, 
       success:function(){ 
        window.location.reload(); 
       }, 
       error:function(){ 
        alert('Something goes wrong. Please check the form and try again.'); 
       }, 
       complete:function(){ 
        loading_image.hide(); 
       } 
      }); 
     }); 
    }); 
})(jQuery); 
<img src="http://www.mytreedb.com/uploads/mytreedb/loader/ajax_loader_gray_512.gif" id="form_loading_img" style="display:none"> 
<form action="action.php" id="form" method="post"> 
    <!--- Your form element ----> 
</form> 

Answer 2

如果你正在使用AJAX，那么你可以开始展示GIF上按一下按钮，然后在阿贾克斯的做好的情况下调用，您可以删除装载仪GIF

最初使用这个

并在点击提交使用

$("#btnSubmit").click(function(){ 
    $("#showGif").attr("style",""); 

}) 

，并在你的Ajax调用使用的成功功能

$("#showGif").attr("style","display:none"); 

但是，如果你正在使用完整的帖子，然后你的Gif不会是extire请求和响应显示。

如果仍然需要它，你需要表现出对如上图所示提交按钮的点击事件。 但最初你需要的是您使用的数据提交阿贾克斯（），以显示属性保持到没有包含GIF div