jquery ajaxコールの読み込み画面が表示されない

Question

ajax呼び出しが行われたときに読み込み画面を表示し、ajax呼び出しが完了したときに読み込み画面を非表示にしたい。私はそれのためのコードを書いたが、それはモジラでのみ動作します。私はそれがすべてのブラウザで動作するようにします。 私の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> 

like-で、IS-

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

コーディングjqueryのは、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 
     } 
    }); 
});