jquery ajax调用上的加载屏幕没有到来答案

【问题标题】：loading screen on jquery ajax call is not comingjquery ajax调用上的加载屏幕没有到来
【发布时间】：2012-01-22 19:32:43
【问题描述】：

我想在进行 ajax 调用时显示加载屏幕，并在 ajax 调用完成时隐藏加载屏幕。我已经为它编写了代码，但它仅适用于 mozilla。我希望它适用于所有浏览器。我的 HTML 代码就像-

<div id="loadScreen" style="display: none;width: 100%; height: 100%; top: 0pt;left: 0pt;">
   <div id="loadScr" style="filter: alpha(opacity = 65);  z-index: 9999;border: medium none; margin: 0pt; padding: 0pt; width: 100%; height: 100%; top: 0pt;left: 0pt; background-color: rgb(0, 0, 0); opacity: 0.2; cursor: wait; position: fixed;"></div>
   <div id="loader"  style="z-index: 10000; position: fixed; padding: 0px; margin: 0px;width: 30%; top: 40%; left: 35%; text-align: center;cursor: wait; ">
     <img src="IMG/ajax-loader.gif" alt="loading" />
   </div>
</div>

而jquery编码是-

$.ajax({
   cache: false,
   beforeSend: function () {
     $('#loadScreen').show();
   },
   type: "POST",
   async: false,
   url: serviceUrl,
   data: jsonData,
   contentType: "application/json; charset=utf-8",
   dataType: "json",
   complete:function(){
     $('#loadScreen').hide();
   },
   success: function (result) {
     ProcessAjaxResponse(result);
   },
   error: function (errorMsg) {
     //TODO:Lets see
   }
});

【问题讨论】：

你的 showLoadingScreen 函数是什么样的？ loadScreen 及其容器的 z-index 属性是什么？
没有类似 showLoadingScreen 的方法。我所做的只是 $('#loadScreen').show();和 $('#loadScreen').hide();所有的 css 属性都应用在 html 本身中
我测试了您在 IE7-9、Chrome 和 FF 中提供的代码。它适用于所有三个。有更全面的测试页面吗？
如果你已经注释掉了 $('#loadScreen').hide();那么您将能够在所有浏览器中看到加载屏幕，但我的问题是，一旦进行 Ajax 调用，我希望加载屏幕出现。这只发生在FF中。在其他浏览器中，它根本不会出现，尽管浏览器会挂起，直到调用成功回调或错误回调。

标签： ajax jquery jquery-mobile

【解决方案1】：

在 ajax 调用之前显示您的屏幕，并将 ajax 调用放在“显示”回调中。这将确保在进行 ajax 调用之前更新屏幕。

$('#loadScreen').show(function() {
    $.ajax({
        cache: false,
        beforeSend: function() {
            //now happens above
        },
        type: "POST",
        async: false,
        url: serviceUrl,
        data: jsonData,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        complete: function() {
            $('#loadScreen').hide();
        },
        success: function(result) {
            ProcessAjaxResponse(result);
        },
        error: function(errorMsg) {
            //TODO:Lets see
        }
    });
});

【讨论】：