是否有“元素渲染”？事件？

Question

我需要準確測量網頁應用程式中文字的尺寸，這是透過建立一個元素（具有相關CSS 類別）、設定其innerHTML 然後使用appendChild 將其新增到容器中來實現的。

執行此操作後，在渲染元素之前需要等待一段時間，並且可以讀取其 offsetWidth 以了解文字的寬度。

目前，我正在使用 setTimeout(processText, 100) 等待渲染完成。

是否有任何我可以監聽的回調，或者更可靠的方式來判斷我創建的元素何時已被渲染？

Answer 1

接受的答案是 2014 年的，現在已經過時了。 setTimeout 可能可以工作，但它不是最乾淨的，並且不一定保證元素已添加到 DOM 中。

截至 2018 年，MutationObserver 是您應該使用什麼來偵測元素何時新增到 DOM。 MutationObservers 現在在所有現代瀏覽器（Chrome 26 、Firefox 14 、IE11、Edge、Opera 15 等）中得到廣泛支援。

將元素新增至 DOM 後，您將能夠檢索其實際尺寸。

這是一個簡單的範例，說明如何使用 MutationObserver 來偵聽何時將元素新增至 DOM。

為了簡潔起見，我使用 jQuery 語法來建立節點並將其插入 DOM 中。

var myElement = $("
hello world
")[0];

var observer = new MutationObserver(function(mutations) {
   if (document.contains(myElement)) {
        console.log("It's in the DOM!");
        observer.disconnect();
    }
});

observer.observe(document, {attributes: false, childList: true, characterData: false, subtree:true});

$("body").append(myElement); // console.log: It's in the DOM!

只要在 document 中新增或刪除任何節點，observer 事件處理程序就會觸發。然後，在處理程序內，我們執行 contains 檢查以確定 myElement 現在是否位於 document 中。

您不需要迭代儲存在 mutations 中的每個 MutationRecord，因為您可以直接對 myElement 執行 document.contains 檢查。

為了提高效能，請將 document 替換為 DOM 中將包含 myElement 的特定元素。

Answer 2

目前沒有 DOM 事件表示元素已完全呈現（例如套用和繪製附加的 CSS）。這可能會使某些 DOM 操作代碼傳回錯誤或隨機結果（例如取得元素的高度）。

使用setTimeout給瀏覽器一些渲染開銷是最簡單的方法。使用

setTimeout(function(){}, 0)

可能是最實際準確的，因為它將您的程式碼放在活動瀏覽器事件佇列的末尾，沒有任何延遲- 換句話說，您的程式碼在渲染操作（以及當時發生的所有其他操作）之後立即排隊）。