Заменить Div в AJAX Ответ перед добавлением к DOM

Question

Я создаю переход AJAX между страницами, на которых у меня есть изображение героя, которое остается неизменным на обеих страницах. После того, как вы нажмете на ссылку, я сосредоточусь на изображении, добавлю новый HTML-код и затухаем по центру изображения. Проблема в том, что даже с кэшированным изображением (это тот же файл) я вижу, как изображение внезапно появляется сзади (из ответа AJAX, рендеринга после добавления в DOM), когда исчезает изображение спереди.

Даже добавляя небольшую задержку к затуханию изображения спереди, изображение в задней части еще не готово. (Вероятно, рендеринг занимает больше времени).

Мои варианты: ждать, пока изображение div Ajax будет полностью отображено (что я не знаю, как это сделать), или - и вот что я хотел бы попробовать: Заменить (скопировать) изображения в ответе AJAX перед добавлением его в DOM.

Возможно ли это, и это поможет улучшить производительность? Я также попытаюсь заменить div сразу после замены содержимого ответом AJAX.

Любые подсказки по-прежнему очень приветствуются.

веселит

Answer 1

Вы можете установить свойство CSS z-index так, что верхнее изображение остается на вершине. И установите прослушиватель событий, чтобы при завершении загрузки снизу вы могли погасить верхнее изображение.

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

Answer 2

Хорошо спасибо за ответ. Это то, что я имел в виду. Для этого потребуется некоторое ожидание завершения изображения, а затем fadeOut верхнего изображения. Но у меня получилось более приятное решение:

Поскольку оба изображения точно такие же, я заменяю содержимое на обратной стороне (ответ ajax) и сразу же после того, как я скопировал изображение сверху в ответ ajax (поэтому я заменяю изображение с уже загруженным).

Затем я постепенно исчезаю. Это дает мне очень плавный переход, а недостаток «ожидания до загрузки» ушел.

(По сравнению с моим первоначальным вопросом, где я хотел, чтобы заменить изображение внутри AJAX ответа, прежде чем добавить его в DOM, теперь я добавить его в DOM и манипулировать она немедленно.)

Спасибо в любом случае. Cheers