Jquery处理时显示旋转器 - jquery show spinner when processing

jquery show spinner when processing

本文关键字：旋转显示处理 Jquery | 更新日期: 2023-09-27

单击"保存"后，服务器端脚本(可能是php)将与服务器连接，将图像或表单数据上传到服务器。当这个过程发生时，我想要一个旋转器来显示。

转轮的HTML是:

<div class="spinner">
   <img src="img/loader.gif" alt="Processing" />
</div>

我的CSS:

.spinner {
    z-index: 9999;
    position: fixed;
    background: rgba(0, 0, 0, 0.1);
    width: 100%;
    height: 100%;
    top: 0; left: 0; right: 0; bottom: 0;
    display: none;
}
.spinner img {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 10000;
}

我找到了一个建议这样做的答案:

        $body = $("body");
        $(document).on({
            ajaxStart: function() { $body.addClass("loading");    },
             ajaxStop: function() { $body.removeClass("loading"); }    
        });

CSS:

body.loading {
    overflow: hidden;   
}
body.loading .spinner {
    display: block;
}

我想知道这是否适用于我，或者如果你可以建议一些不同的在我的情况下。

当使用ajax时，您可以简单地使用:

$.ajax({
  url:'/sample/url',
  type:'POST',
  //it will fired when the data is currently processing
  beforeSend: function(){ 
   $('body').addClass("loading");
  },
  success: function(){
   $('body').removeClass("loading");
  },
  error: function(){
  }
});

我也做过类似的事情，

<form id="feedback">
<div class="spinner" id="loader_login" style="display: none;">
<input type="submit" value="submit" >

在你的jquery after按钮点击，

$('#feedback').submit(function (event) {
        $("#loader_login").css("display", "block");
       //data process
       $("#loader_login").css("display", "none");
}

在您的例子中，ajaxStart和ajaxStop函数不理解变量$body，因为它是在它们之外定义的。

您需要在ajaxStart函数中使用$("body").addClass("loading")，并且类似于removeClass。