要素がjQuery ajaxコールの前に表示されない

Question

ajax呼び出しがトリガされ、ajaxで非表示にされる前に表示されるはずのajaxローダーgifがありますが、要素は表示されません。

inspectを使用してデバッグし、ステップバイステップで実行すると、その要素が表示されます。

$("#ajaxLoader").show(); 
    $('.spn-invalid-zip').hide(); 
    $("#txtZipCode").removeClass("input-validation-error-style"); 
    if ($("#inValidZipCode").length <= 0) { 
     $($('#txtZipCode').parent()).append("<span id='inValidZipCode' class='spn-invalid-zip input-validation-error-style'></span>"); 
    } 
    var valZipCode = value; 
    if (valZipCode.length < 5) { 
     resetCountyFields(); 
     return false; 
    } 
    var zipCodeResult = false; 
    $.ajax({ 
     url: path, 
     type: "POST", 
     data: { zipcode: valZipCode }, 
     async: false, 
     success: function (data) { 
      .... 
     }, 
     complete: function() { 
      $("#ajaxLoader").hide(); 
     } 
    }); 

Answer 1

あなたのAJAX呼び出しでasync: falseを使用しているため問題があります。これにより、リクエストの転送中にブラウザのUIスレッドが更新されなくなり、表示/非表示の画像がユーザーの画面上で更新されることはありません。あなたはAJAXのオプションからそのプロパティを削除する場合は、あなたのコードは正常に動作します：

$("#ajaxLoader").show(); 

// your logic here: 

$.ajax({ 
    url: path, 
    type: "POST", 
    data: { zipcode: valZipCode }, 
    success: function (data) { 
     .... 
    }, 
    complete: function() { 
     $("#ajaxLoader").hide(); 
    } 
}); 

をfalseからasyncプロパティを設定要求の同期を行うために使用され、あなたが取得するためにコールバック関数を使用する必要はありませんように要求内のデータを更新し、要求が終了するまでUIが更新されないようにします。しかし、実際には悪い習慣です。コンソールは、要求が完了するまでブラウザがユーザに見えるようになるので、その使用について警告します。要求が完了するまで数秒かかる場合があります。

UIが更新される前にコードがになる特定の状況でのみ有効です（onbeforeunload）。それ以外は決して使用しないでください。