隐藏Spinner加载

后，我想在页面加载我这个尝试后隐藏微调：隐藏Spinner加载

$(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>

但没有结果。

来源

2016-11-09 Martin antonsson

嗨马丁。你能解释ajaxStart和ajaxStop功能吗？这段代码是否与特定的库或插件相关，或者您是否打算编写这些代码？ –

从jQuery 1.9开始，jQuery全局Ajax事件的所有处理程序（包括使用'.ajaxStart（）'方法添加的处理程序）必须附加到'document' - [** Docs **]（https：// api .jquery.com/ajaxStart /） –

您可以通过使用.ajaxSend()和.ajaxComplete()Ajax Event Handlers

.ajaxSend实现这一目标（）：每当一个Ajax请求即将发送，jQuery的触发事件ajaxSend。任何和所有已使用.ajaxSend()方法注册的处理程序都会在此时执行。
.ajaxComplete（）：只要Ajax请求完成，jQuery就会触发ajaxComplete事件。任何和所有已在.ajaxComplete()方法中注册的处理程序都会在此时执行。

我使用下面的代码来显示一个加载器，当ajax请求被做出，然后在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);

正如可存在AJAX请求的嵌套所以ajax_req_no是计数的请求的数目如果计数为一个以上的装填器将显示否则装填器将被隐藏。

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

参考：

来源

2016-11-09 17:54:44

请添加一些关于此代码为何帮助OP的解释。这将有助于提供未来观众可以从中学习的答案。有关更多信息，请参阅[答案]。 –

你能只是把.show()代码Ajax调用，然后在.success()或.done()一个.hide()沿线的前面...

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

来源

2016-11-09 18:03:53 gordon

在我看来，你要找的是这样的：

$(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>

来源

2016-11-10 00:55:22 arhak

隐藏Spinner加载

回答

相关问题