JavaScript加載圖像凍結，同時使Ajax調用

我已經建立了一個頁面使用jQuery，使用異步Ajax調用。我試圖展示一個加載的gif，但對於我的生活我無法讓它工作。 gif從不顯示。有任何想法嗎？JavaScript加載圖像凍結，同時使Ajax調用

function updateCityList(state) { 
     $("#city-loading").empty().html('<img src="/Images/loading.gif" />'); 
     $.ajax(
      { 
       type: "GET", 
       async: true, 
       url: "/NPA/GetCities/" + state, 
       dataType: "json", 
       success: function(optionData) { 
        var options = []; 
        $(optionData).each(function(index, optionData) { 
         if ($('#cities option[value=' + optionData.Value + ']').length == 0) 
          options.push(optionData); 
        }); 
        $("#cityList").fillSelect(options); 
       } 
      }); 
     $("#city-loading").empty(); 
    };

來源

2009-08-30 user135498

Y我們對$.ajax()的呼叫引發了請求，然後立即繼續，因爲您正在異步地進行呼叫。因此致電$("#city-loading").empty();立即發生。

您需要將$("#city-loading").empty();移動到success:函數末尾，以便在AJAX請求完成之前不會調用它。

來源

2009-08-30 22:02:52 RichieHindle

優秀！這是有道理的，它的工作。還有一個問題：儘管顯示gif，但在進行ajax調用時會凍結。有沒有解決辦法？ – user135498 2009-08-30 22:06:58

nope，這是ie中的一個已知問題。它的問題在ff/chrome等工作正常 – redsquare 2009-08-30 22:22:12

謝謝。我會和它一起生活。 – user135498 2009-08-30 22:23:06

首先你撥打：

$("#city-loading").empty().html('<img src="/Images/loading.gif" />');

則是Ajax調用，因爲它是異步代碼執行將繼續執行此：

您應該隱藏在阿賈克斯圖像回撥：

function updateCityList(state) { 
    $("#city-loading").empty().html('<img src="/Images/loading.gif" />'); 
    $.ajax(
     { 
      type: "GET", 
      async: true, 
      url: "/NPA/GetCities/" + state, 
      dataType: "json", 
      success: function(optionData) { 
       $("#city-loading").empty(); 
       var options = []; 
       $(optionData).each(function(index, optionData) { 
        if ($('#cities option[value=' + optionData.Value + ']').length == 0) 
         options.push(optionData); 
       }); 
       $("#cityList").fillSelect(options); 
      } 
     }); 
};

來源

2009-08-30 22:01:15 Arjan

我會提供一個無代碼的解釋。您正在動態添加HTML到DOM（img src）。 DOM具有獨立於Javascript執行的自然延遲。這意味着你的ajax調用是先完成的，然後應用程序從服務器下載圖像。

您的最佳解決方案是將圖像添加到頁面。確認圖像已加載到DOM中。（向圖像對象添加一個id，然後使用查詢來確認您可以訪問它）。然後讓你的ajax電話。

另一種選擇可能是預加載圖像，以便不需要下載服務器。

來源

2009-08-30 22:07:35 Glenn

JavaScript加載圖像凍結，同時使Ajax調用

回答

相關問題