Question

我正在尝试使用以下代码显示一个在ajax调用之前容器加载器的div。

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

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

Answer 2

你可以试试这个例子。

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

您可以使用此ajax的全局事件

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

Answer 4

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

<强> 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绝不是一个好主意，“它们”应该是每个文档的唯一。

我总是在“js-”前面添加一个类帮助我确定js

中使用的选择器/元素

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调用之前显示一个Loader，但它不起作用

5 个答案: