加载后隐藏微调器 [英] Hide spinner after loading

问题描述

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

I want to hide spinner after loading the page I tried with this :

$(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（）和 .ajaxComplete（）<来实现此目的/ code> Ajax Event
Handlers

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


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

1. .ajaxSend() : Whenever an Ajax request is about to be sent, jQuery triggers the ajaxSend event. Any and all handlers that have been registered with the .ajaxSend() method are executed at this time.
2. .ajaxComplete() : Whenever an Ajax request completes, jQuery triggers the ajaxComplete event. Any and all handlers that have been registered with the .ajaxComplete() method are executed at this time.

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

I used the below code to show a loader when ajax request is made and then hide it after ajax request complete.

这是代码：

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将被隐藏。

As there can be a nesting of ajax request so ajax_req_no is to count the number of request if the count is more then one loder will be shown otherwise loder will be hidden.

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

---

参考：

Note: As of jQuery version 1.8, this method should only be attached to document.

---

Reference:

• .ajaxSend（）


• 。ajaxComplete（）

• .ajaxSend()
• .ajaxComplete()

这篇关于加载后隐藏微调器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！