加载后隐藏微调器

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

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

但没有结果。

您可以通过使用来实现这一点.ajaxSend() and .ajaxComplete() 阿贾克斯事件 处理程序 https://api.jquery.com/Ajax_Events/

1. .ajaxSend()：每当要发送 Ajax 请求时，jQuery 都会触发ajaxSend事件。已注册的所有处理程序.ajaxSend()方法此时执行。
2. .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。

Note:从 jQuery 1.8 版开始，此方法只能附加到document.

• .ajaxSend() http://api.jquery.com/ajaxsend/
• .ajaxComplete() http://api.jquery.com/ajaxcomplete/