我试图在 Jquery Ajax 调用之前显示加载器，但它不起作用

Question

我正在尝试使用以下代码显示 div 在 ajax 调用之前容器装载程序。

$(document).ajaxStart(function() {
  $("#div_loader").css("display", "block")
})

$(document).ajaxComplete(function() {
  $("#div_loader").css("display", "none");
})

但是当我使用 Chrome 开发人员工具调试 JS 时，我只能看到 div。但通常情况下，它永远不会出现。

Div Html

<div class="loader" id='div_loader'>
            <div class="shade"></div>
            <div class="popup">
            </div>
        </div>

Css 对于加载程序

.loader {
    position: absolute;
    /* height: 100%; */
    max-height: 100%;
    width: 100%;
}

.shade {
    position: fixed;
    z-index: 9999999999;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #333;
    opacity: 0.8;
}

.loader .popup {
    position: fixed;
    height: 102px;
    width: 218px;
    background: url(../images/loader.gif) 50% 85% no-repeat;
    background-size: 32px;
    margin: 12% auto;
    border-radius: 6px;
    top: 10%;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99999999999;
}

这是 ajax 请求...

function AjaxPostCall(ServicePath, Input) {
    var data = $.parseJSON($.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: ServicePath,
        data: JSON.stringify({ 'Input': Input }),
        dataType: "json",
        async: false
    }).responseText); // This will wait until you get a response from the ajax request.
    var DataSet = JSON.parse(data.d);
    return DataSet;    
}

Answer 1

你可以试试这个例子。

$(document).ajaxStart(function() {
  $("#div_loader").css("display", "block")
});

$(document).ajaxComplete(function() {
  $("#div_loader").css("display", "none");
});

$(document).ready(function(){
  $.ajax({url: "demo_test.txt", success: function(result){
            $("#div1").html(result);
  }});
});

#div_loader
{
  background-color: #EEE;
  Color: #000;
  width:100%;
  height:500px;
  text-align:center;
  padding-top:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="div_loader">Please wait...
</div>

<div id="div1">
</div>

Answer 2

您可以使用 ajax

的这个全局事件

    $(document).bind("ajaxSend", function(){
        $("#div_loader").css("display", "block");
     }).bind("ajaxComplete", function(){
        $("#div_loader").css("display", "none");
     });

Answer 3

不完全确定问题是什么，没有看到所有的代码，但很多次我都使用了与下面类似的方法。

HTML

<div class='js-div-loader div-loader'></div>

CSS

.div-loader{
  width: 200px;
  height:200px;
  padding:10px;
  /*'Hide here, if you don't want to hide on page load' display:none;*/
}

JQuery

$(document).ready(function(){
    $(".js-div-loader").hide();

    $(document).ajaxStart(function() {
      $(".js-div-loader").show();
    })

    $(document).ajaxComplete(function() {
      $(".js-div-loader").hide();
    })
});

我更喜欢使用 class's 而不是 id's - 在多个元素上使用相同的 id 绝不是一个好主意，每个文档的 "they" 应该是唯一的。

我总是在 class 前面加上 "js-" 帮助我确定 selectors/elements 在 js

中使用的内容

Answer 4

我已经解决了。我是 Jquery 的新手，我不知道将 ajax 调用的异步属性设置为 false 会冻结页面直到现在。我已经尝试将 async 设置为 true，它现在工作正常。

Answer 5

$(document).ajaxStart(function () {
    blockUI();
})

$(document).ajaxComplete(function () {
    unBlockUI();
})


function blockUI() {
    var loader = '<div class="page-overlay"><div class="page-loader"></div></div>';

    $('#pageLoader').append(loader);
}

function unBlockUI() {
    $('#pageLoader').empty();
}



.page-loader {
    border: 5px solid #eee;
    border-radius: 50%;
    border-top: 5px solid rgba(0,0,0,1);
    width: 50px;
    height: 50px;
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
    position: absolute;
    top: 300px;
    z-index: 9999;
    background-color: rgba(255,255,255,0.3);
    left: 700px;
}

.page-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255,255,255,0.3);
    z-index: 9999;
    cursor: wait;
}


<div id="pageLoader"></div>

我试图在 Jquery Ajax 调用之前显示加载器，但它不起作用

I am trying to show a Loader before Jquery Ajax call but it does not work

ajax

jquery

loader