在添加到DOM之前，在AJAX響應中替換Div

我正在創建一個AJAX過渡到頁面，其中我有一個英雄圖像在兩個頁面上保持相同。點擊一個鏈接後，我將圖像居中，在後面添加新的HTML，並淡出中心圖像。問題是，即使有一個緩存的圖像（它是同一個文件），我看到圖像突然出現在後面（從AJAX響應，附加到DOM後渲染），當淡出前面的圖像。在添加到DOM之前，在AJAX響應中替換Div

即使在前面的圖像淡出時加入一點延遲，後面的圖像仍然沒有準備好。（可能渲染只需要更多時間）。

我的選擇是等待Ajax圖像div完全呈現（我不知道該怎麼做），或者 - 這就是我想嘗試的：替換（複製）在將其添加到DOM之前，在AJAX響應內的圖像。

這是否可能，它會幫助提高性能？我也會嘗試在用AJAX響應替換內容後立即替換div。

任何提示仍然非常受歡迎。

歡呼

來源

2017-01-10 Merc

，使頂部圖像停留在頂端您可以設置CSS z-index財產。並設置一個事件監聽器，當下面的圖像完成加載時，您可以淡出頂部圖像。

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

來源

2017-01-10 23:08:45 David

非常感謝您的回答。這就是我的意思。這將需要一些等待圖像完成加載，然後淡出頂部圖像。但我得到了一個更好的解決方案：

因爲這兩個圖像是完全一樣的，所以我替換了後面的內容（ajax響應），並且在我將頂部圖像複製到ajax響應後立即（因此我將圖像與已經加載的一個）。

然後我馬上淡出。這給了我一個非常順利的過渡，「等到加載」的缺點消失了。

反正（相較於我最初的問題，在這裏我想將它添加到DOM之前更換Ajax響應中的形象，我現在把它添加到DOM，並立即對其進行操作。）

感謝。乾杯

來源

2017-01-11 12:48:29 Merc

在添加到DOM之前，在AJAX響應中替換Div

回答

相關問題