Question

我想在进行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
   }
});

Answer 1

在ajax调用之前显示您的屏幕，并将ajax调用放在'show'回调中。这将确保在进行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
        }
    });
});

在jquery上加载屏幕ajax调用没有到来

1 个答案: