JQuery：beforeSendのコードが実行される前にajaxリクエストが実行されるのはなぜですか？

Question

これは私のコードです。基本的に私はReload.gifを持っています。データをリロードするためにajaxリクエストを送信する前に私のページで再生を開始したいのです。しかし、何が起きるのかは、成功関数が呼び出された後に再生が始まるだけです。 3は

をコンソールに記録：2

0：10秒をコンソールに記録：1

0時00秒をコンソールに記録：

0時00秒：これは、タイムラインは次のようになります

0:10秒：GIFが再生を開始します。

これは意味がありません。img asyncなどのsrcを設定していますか？ 画像コード：

<img id="reloadIcon" src="/img/Reload.png" style="width: 25px; height: 25px"/>

jQuery.ajax({ 
    url: url, 
    type: 'GET', 
    timeout: 20000, 
    beforeSend: function() { 
     console.log(1); 
     document.getElementById('reloadIcon').src = "/img/Reload.gif"; 
     console.log(2); 
    }, 
    success: function (result) { 
     console.log(3); 
    } 
}); 

Answer 1

$.ajax()呼び出しの前にイメージをロードします。 <img>要素のCSS displayプロパティをbeforeSend関数に切り替えます。<img>要素の.srcを変更するのではなく、 「SRC」を変更することで、画像のフェッチ

jQuery.ajax({ 
    url: url, 
    type: 'GET', 
    timeout: 20000, 
    beforeSend: function() { 
     console.log(1); 
     document.getElementById('reloadIcon').style.display = "block"; 
     console.log(2); 
    }, 
    success: function (result) { 
     document.getElementById('reloadIcon').style.display = "none"; 
     console.log(3); 
    } 
    , error: function() { 
     document.getElementById('reloadIcon').style.display = "none"; 
    } 
}); 

Answer 2

は非同期で、私はあなただけのページがロードされたとき、SRCを設定しますが、画像要素を非表示にすることができると思います。また、ajaxが始まるときにイメージを表示するように設定します。

Answer 3

src属性を変更した場合、ブラウザはキャッシュ内のイメージを探すなどの一連の作業を完了する必要があります。イメージを再要求し、a.s.oを解析する必要があります。

第2に、JSコードは他の多くのものと1つのスレッドを共有します。ブラウザーは、CSSの割り当てを内部的にキャッシュし、右から欠落したキャッシュされた変更がコードの機能に影響を与えない限り、最初に次のJSコードを実行する傾向があります。この場合に強制的に割り当てたい場合は、特定のCSSプロパティを読んでください。ブラウザは前に変更を割り当てます。私は（テストしていない）状態になりがちですが、属性にもそのような振る舞いがあります。

この場合のベストプラクティスはguest271314の投稿です。外側のコンテナを隠して表示する方がはるかに高速で信頼性が高いです。