Question

在Google Chrome中同步（Async：false）ajax调用期间，加载程序无法正常工作。在Firefox和Firefox中运行良好IE浏览器。在我的调试测试期间，Loader显示直到ajax请求开始。当请求发送到服务器时，我会保持调试点，从而被删除或消失。我尝试过其他解决方案，比如使用ajaxStart，beforeSend＆amp; ajax装载机等，但没用。请提供有效的解决方案

 <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

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

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

Answer 3

我在 google-chrome 中尝试了它正在运行。如果您在问题上遗漏了一些代码，可以检查您是否有任何其他错误或尝试发布更多代码。

检查jsfiddle上的代码，它正常运行。

我只将其添加到您的代码中：

error: function(data){
                       $('#LoaderDiv').hide(); 
               }

但请注意我添加了错误处理函数，因为如果错误发生，图像（您的 gif ）将永远显示。（如果您从服务器收到任何错误响应，那么这将是一个解决方案）

Answer 4

或者只是这个

$.ajax({ 
                    .. , 
                 beforeSend: function () { $('#LoaderDiv').show(); },

                 success: function (data) { $('#LoaderDiv').hide(); } 
        });

这将使它更快一点

Answer 5

Don't use async: false, Solution is this:-

var requestStatus = 1;
$('#LoaderDiv').show();
if( requestStatus != 0) {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: servicePath,
                beforeSend: function() {
                   requestStatus = 0;
                },
                success: function (data) {
                    console.log(data.d);
                    $('#LoaderDiv').hide();
                    requestStatus = 1;
                }
            });
}

在chrome中同步ajax调用期间，Loader不工作

5 个答案: