Javascript 加载后隐藏微调器

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

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

 });

我有一个部门：

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

.加载器{
位置：固定；
左：0px；
顶部：0px；
宽度：100%；
身高：100%；
z指数：9999；
背景：url（{asset（'img/loading.gif'）}}）50%50%无重复rgb（249249249）；
}

但没有结果

您可以通过使用

.ajaxSend（）

和

.ajaxComplete（）

.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);

var ajax\u req\u no=0；
（函数（$）{
$（文档）.ajaxSend（函数（）{
ajax_请求编号=（ajax_请求编号<0）？0:ajax_请求编号；
ajax_req_no++；
if（$（'.loader'）.length）{
$（'.loader'）.show（）；
}
});
$（文档）.ajaxComplete（函数（）{
ajax_需求号--；
ajax_请求编号=（ajax_请求编号<0）？0:ajax_请求编号；
if（$（'.loader'）.length&&ajax_req_no==0）{
$（'.loader'）.fadeOut（）；
}
});
})（jQuery）；

由于可以嵌套ajax请求，因此

ajax\u req\u no

将计算请求的数量，如果计数超过一个loder，则将显示一个loder，否则loder将被隐藏

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

文档

。

---

参考：

---

您是否能够在ajax调用之前的代码中添加一个

.show（）

，然后在

.success（）

或

.done（）

中添加一个

.hide（）

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

---

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

$（文档）.ready（函数（）{
$（文件）
.ajaxStart（函数（）{
log（'一些AJAX请求已经启动'）；
$（“.loader”）.show（）；
})
.ajaxStop（函数（）{
log（“所有AJAX请求都已完成”）；
$（“.loader”）.hide（）；
})
;
$（“#btn”）。单击（函数（）{
//触发一些AJAX调用
$.get（'example.com'）；
});
});
.loader{
位置：固定；
左：0px；
顶部：0px；
宽度：100%；
身高：100%；
/*z-index:9999；*/*查看演示的console.log*/
背景：url（“img/loading.gif”）50%50%无重复黄色；
显示：无；/*除非被jQuery覆盖*/
}

触发AJAX请求
Hi Martin。你能解释一下ajaxStart和ajaxStop的功能吗？此代码是否与特定库或插件相关，或者您是否打算编写这些代码？从jQuery 1.9开始，jQuery全局Ajax事件的所有处理程序，包括使用
.ajaxStart（）
方法添加的处理程序，必须附加到
文档
-请添加一些解释，说明此代码为何有助于OP。这将有助于提供一个未来观众可以从中学习的答案。有关更多信息，请参阅。