加载后隐藏微调器
我想在加载我试过的页面后隐藏微调器：
$(document).ready(function() { $('.loader') .hide() // Hide it initially .ajaxStart(function() { $(this).show(); }) .ajaxStop(function() { $(this).hide(); }); }); 我有这个div：
.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); }
但没有结果。
您可以通过使用
.ajaxSend()和.ajaxComplete()Ajax事件处理程序来实现此.ajaxSend()
- .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将计算请求的数量，如果计数更多，则将显示一个loder，否则将隐藏loder。
注意：从jQuery版本1.8开始，此方法应仅附加到document 。
参考：
- .ajaxSend（）
- .ajaxComplete（）
你是否能够在ajax调用之前的代码中放置.show() ，然后在.success()或.done()中的.success()中.success() …
$("#buttonStartingAjax").click(function(){ $(".loader").show(); $.ajax({...}).done(function(){ $(".loader").hide(); ... }); )};
在我看来，你正在寻找这样的东西：
$(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 */ }