JavaScriptロードイメージがajax呼び出しをフリーズする

Question

私は、非同期Ajax呼び出しを使用するjQueryを使用してページを構築しました。私はローディングGIFを表示しようとしていますが、私の人生ではうまく動作しません。 gifは表示されません。何か案は？

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

Answer 1

$.ajax()への呼び出しは、要求を非同期的に処理しているため、リクエストを開始してすぐに処理を続行します。したがって、$("#city-loading").empty();へのコールはすぐに発生します。

$("#city-loading").empty();をsuccess:関数の最後に移動する必要があります。そのため、AJAX要求が完了するまで呼び出されません。

Answer 2

まずお電話：それはこれを継続して実行します非同期コードの実行であるので、

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

、その後は、AJAX呼び出しです：

​​

あなたは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); 
      } 
     }); 
}; 

Answer 3

私はコードフリーの説明を提供します。 DOMに動的にHTMLを追加しています（img src）。 DOMは、Javascriptの実行とは独立した自然な待ち時間を持ちます。これは、あなたのajax呼び出しが最初に行われた後、アプリケーションがサーバーからイメージをダウンロードすることを意味します。

あなたの最善の解決策は、画像をページに追加することです。イメージがDOMにロードされていることを確認します。 （イメージオブジェクトにIDを追加し、クエリを使用してアクセスできることを確認します）。その後、あなたのajax呼び出しを行います。

もう1つのオプションは、サーバーのダウンロードが不要なように画像をプリロードすることです。