加载程序在 chrome 中的同步 ajax 调用期间不工作

Question

加载程序在 google chrome 中的同步 (Async:false) ajax 调用期间不工作。在 Firefox 和 IE 中工作正常。在我的调试测试期间，Loader 显示直到 ajax 请求开始。当请求发送到服务器时被删除或消失，我在那里保留了一个调试点。我尝试过其他解决方案，例如使用 ajaxStart、beforeSend 和 ajax loader 等，但没有用。请给出有效的解决方案

 <div id="LoaderDiv" style="display: none">
    <img id="ImageLoader" src="Images/loading.gif" />
 </div>

---

            $('#LoaderDiv').show();
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: servicePath,
                async: false,
                success: function (data) {
                    console.log(data.d);
                    $('#LoaderDiv').hide();
                }
            });

Answer 1

过去 1 年我也面临同样的问题，即使使用 async: false。终于找到了最好的解决方案，但不确定它是否适用于您的情况，它对我有用 101%。

以下是代码：-

    $.ajax({ 
                .. , 
             beforeSend: function () { showLoader(); },

             success: function (data) { hideLoader(); } 
    });


function showLoader() {
    $("#progressbar").css("display", "");
}

function hideLoader() {
    setTimeout(function () {
        $("#progressbar").css("display", "none");
    }, 1000);
}

您可以在任何常见的 javascript 文件中使这两个函数通用。这样你就可以在多个地方或js文件中调用这些函数。

Html 是：

<div class="spinnermodal" id="progressbar" style="display: none; z-index: 10001">
  <div style="position: fixed; z-index: 10001; top: 50%; left: 50%; height:65px">
      <img src="~/Images/loading.gif" alt="Loading..." />
    </div>
</div>

CSS是：

.spinnermodal {
        background-color: #FFFFFF;
        height: 100%;
        left: 0;
        opacity: 0.5;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 100000;
    }

尝试这个。我希望它也适用于你。快乐编码:-)

Answer 2

将 setTimeout 放在 ajax 请求之前。我尝试了很多解决方案，但这个绝对有效。

$("#loader").show();
setTimeout(function () {
  //AJAX REQUEST CODE
  $("#loader").hide();
},10);