AJAXコールの前にプリロードをロード

Question

私はAJAXコールを作成しています。これは同期的なので、コンテンツが読み込まれている間は「ハング」します。 AJAX呼び出しの前に、私は、着信コンテンツの親ノード間もなく-ことにプリロード画像を追加します。

function makePreLoader(parentNode) 
{ 
    var img = document.createElement("img"); 
    img.src = "images/preloader.gif"; 
    parentNode.appendChild(img); 
} 


function getData() 
{ 
    var parentNode = document.getElementById("myParentNode"); 
    makePreloader(parentNode); 

    $.ajax( 
    "http://www.example.com/", 
    { 
     success: function(resp) 
     { 
     $(parentNode).html(resp); 
     }, 
     async: false 
    } 
); 
} 

example.comでの私のスクリプトは7秒をハングアップする簡単なPHPスクリプトであるとし、「完了の返信"

私は 'getData'を呼び出すとき、予負荷画像のロードを確認してから、「done」に置き換えてください。

実際の動作は、コールがハングする（プリローダーを追加していないことが明らかです）、コンテンツを読み込みます。

誰も同様の問題がありましたか？誰かが良い解決策を推奨できますか？

Answer 1

使用ajaxStartではなく、ここで

は良い解決策ありません、それ

https://stackoverflow.com/a/68503/413670

Answer 2

呼び出しを非同期に行うことを除いて、実行する方法の例です。同期Ajax呼び出しは、定義上、UIスレッドをブロックします。したがって、UIのすべての操作は、呼び出しが応答するまで中断されます。それがUIのように思われる理由は何とかぶら下がっています。

tl; dr：非同期ajaxを使用します。同期コールを行う必要がある理由はほとんどありません。