Question

我想在加载页面后隐藏微调器我试过这个：

$(document).ready(function() {
$('.loader')
    .hide()  // Hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    });

 });

我有这个div：

<style>
.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url("{{ asset('img/loading.gif') }}" )  50% 50% no-repeat rgb(249,249,249);

}
</style>
    <div class="loader"></div>

但没有结果。

Answer 1

您可以使用math.isnan(j)和.ajaxSend() Ajax Event Handlers
来实现此目的

.ajaxSend（）：每当要发送Ajax请求时，jQuery都会触发.ajaxComplete()事件。已使用ajaxSend方法注册的所有处理程序都将在此时执行。
.ajaxComplete（）：每当Ajax请求完成时，jQuery都会触发.ajaxSend()事件。已使用ajaxComplete方法注册的所有处理程序都将在此时执行。

我使用下面的代码显示ajax请求时的加载器，然后在ajax请求完成后隐藏它。

以下是代码：

.ajaxComplete()

因为可以存在ajax请求的嵌套，所以var ajax_req_no = 0; (function ($) { $(document).ajaxSend(function () { ajax_req_no = (ajax_req_no < 0) ? 0 : ajax_req_no; ajax_req_no++; if ($('.loader').length) { $('.loader').show(); } }); $(document).ajaxComplete(function () { ajax_req_no--; ajax_req_no = (ajax_req_no < 0) ? 0 : ajax_req_no; if ($('.loader').length && ajax_req_no == 0) { $('.loader').fadeOut(); } }); })(jQuery);是计算请求的数量，如果计数更多，那么将显示一个loder，否则loder将被隐藏。

注意：从jQuery版本1.8开始，此方法只应附加到ajax_req_no。

Answer 2

您是否可以在ajax调用之前的代码中添加.show()，然后在.hide()或.success()中添加.done() ...

$("#buttonStartingAjax").click(function(){
    $(".loader").show();
    $.ajax({...}).done(function(){
        $(".loader").hide();
        ...
    });
)};

Answer 3

在我看来，你正在寻找这样的东西：

$(document).ready(function() {
  $(document)
    .ajaxStart(function() {
      console.log('some AJAX request has started'); 
      $(".loader").show();
    })
    .ajaxStop(function() {
      console.log('all AJAX requests have completed'); 
      $(".loader").hide();
    })
  ;

  $("#btn").click(function() {
    // trigger some AJAX call
    $.get('example.com');
  });
});

.loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  /*z-index: 9999;*/ /* to see demo's console.log */
  background: url("img/loading.gif")  50% 50% no-repeat yellow;
  display: none; /* unless overriden by jQuery */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="loader"></div>

<button id="btn">Trigger an AJAX request</button>

加载后隐藏微调器

3 个答案: