Gibt es „Element-Rendering'? Ereignis?

Question

Ich muss die Abmessungen von Text in einer Webanwendung genau messen. Dazu erstelle ich ein Element (mit der entsprechenden CSS-Klasse), lege es fest innerHTML 然后使用 appendChild und füge es einem Container hinzu.

Danach müssen Sie eine Weile warten, bis das Element gerendert wird und offsetWidth gelesen werden kann, um die Breite des Textes zu ermitteln.

Derzeit verwende ich setTimeout(processText, 100), um zu warten, bis das Rendern abgeschlossen ist.

Gibt es einen Rückruf, den ich abhören kann, oder eine zuverlässigere Möglichkeit, festzustellen, wann das von mir erstellte Element gerendert wurde?

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)

可能是最实际准确的，因为它将您的代码放在活动浏览器事件队列的末尾，没有任何延迟 - 换句话说，您的代码在渲染操作（以及当时发生的所有其他操作）之后立即排队）。