DOMに追加する前にAJAXレスポンスのDivを置換する

Question

私は両方のページで同じ英雄画像を持つページにAJAXトランジションを作成しています。 リンクをクリックすると、イメージを中央に置き、新しいHTMLを後ろに追加し、中央のイメージをフェードアウトします。 問題は、キャッシュされた画像（同じファイル）であっても、前面に画像がフェードアウトすると、（AJAXレスポンスからDOMに追加してレンダリングされた）画像が突然表示されるのが見えます。

画像のフェードアウトに少し遅れを加えても、背面の画像はまだ準備ができていません。 （おそらく、レンダリングには時間がかかります）。

私のオプションは、Ajax画像のdivが完全にレンダリングされるのを待つことです（これは私にはわからない）。それは私が試してみたいことです： 画像をDOMに追加する前にAJAXレスポンス内に挿入します。

これも可能なのですか？それがパフォーマンスの向上に役立ちますか？ また、コンテンツをAJAXレスポンスに置き換えた直後にdivを置き換えようとします。

ヒントはまだ大歓迎です。トップ画像が上に留まるように

歓声

Answer 1

あなたは、CSS z-indexプロパティを設定することができます。また、イベントリスナーを設定すると、下の画像のロードが終了したときに上の画像がフェードアウトされます。

$('#bottom-img').on('load', function() { 
    $('#top-img').fadeOut(); 
}); 

Answer 2

回答ありがとうございました。これは私が意味していたものです。これは、画像のロードが完了するのを待ってから、最前面の画像をフェードアウトする必要があります。しかし、私はより良い解決策を得ました：

2つの画像はまったく同じなので、私はバック（Ajaxレスポンス）の内容を置き換え、直ちに画像をAjaxレスポンスにコピーした直後（つまり、すでに読み込まれている画像）。

その後、すぐにフェードアウトします。 これは私に非常に滑らかな見た目の変化をもたらし、「ロードまで待機する」の欠点はなくなった。

（私はDOMに追加する前にAjaxのレスポンス内の画像を交換したかった私の最初の質問、と比較して、私は今、DOMに追加し、すぐにそれを操作する。）とにかく

感謝。 乾杯[

]