Question

当＆＃39; .btn-save＆＃39;单击，服务器端脚本（可能是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;
}

我想知道这是否对我有用，或者你可以在我的案例中提出不同的建议。

Answer 1

使用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(){
  }
});

Answer 2

我做了类似的事情，

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

在按钮点击后的jquery中，

$('#feedback').submit(function (event) {
        $("#loader_login").css("display", "block");

       //data process

       $("#loader_login").css("display", "none");
}

Answer 3

在您的情况下，ajaxStart和ajaxStop函数不会取消变量$ body，因为它是在它们之外定义的。

你需要在ajaxStart函数中使用$("body").addClass("loading")，对removeClass也是如此。

jquery在处理时显示微调器

3 个答案: