如何確定何時完全呈現HTML塊

Question

我正在使用AJAX調用向頁面動態添加HTML塊。 在將元素添加到頁面后，我需要知道元素的高度，但是由於添加的元素花費了未知的時間來渲染，因此我無法獲得准確的結果。 有什么方法可以確保在元素在頁面上完成渲染后運行某些JS。

Answer 1

DOM是同步操作的，因此當您對appendChild / append / innerHTML / etc的調用返回時，HTML被“完全渲染”。

但是，資源（即圖像）的加載並不會同步發生。 因此，盡管您可以在插入后在行上檢查新插入內容的渲染高度，但該高度將不包括任何圖像的高度。

要解決此問題，可以顯式指定圖像的寬度和高度– <img width=... height=...> –或可以偵聽每個新插入的圖像上的load事件。 每次觸發事件時，請重新計算元素的高度。 （請注意，每個新圖像都會發生一次。）類似：

$('#somediv').html('... <img src="..."> ...'); // or whatever
$('#somediv img').on('load', function() {
    var h = $('#somediv').height();
    // ...and do what you will with the height
});

Answer 2

在沒有看到您的標記和/或代碼的情況下很難知道，但是如果您正在處理AJAX，則可能想在.done()方法中捕獲一些邏輯。 在這里看看：

jQuery .done（）

另外，您可能想看看jQuery的諾言：

jQuery的承諾