加載jquery ajax調用沒有進入屏幕

我想在ajax調用時顯示一個加載屏幕並在ajax調用完成時隱藏加載屏幕。我爲它編寫了代碼，但它僅適用於Mozilla。我希望它能夠在所有瀏覽器中工作。我的HTML代碼是喜歡 -加載jquery ajax調用沒有進入屏幕

<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 
    } 
});

來源

2012-01-22 user1027112

你的showLoadingScreen函數是什麼樣的？ loadScreen和它的容器是什麼z-index道具？ –

沒有像showLoadingScreen一樣的方法。我正在做的是$（'＃loadScreen'）。show（）;和$（'＃loadScreen'）。hide（）;所有CSS屬性都應用在HTML本身 – user1027112

我測試了您在IE7-9，Chrome和FF中提供的代碼。它適用於所有三種。你有更全面的測試頁面嗎？ –

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 
     } 
    }); 
});

來源

2012-01-24 13:45:12

加載jquery ajax調用沒有進入屏幕

回答

相關問題