Is there "element rendering"? event?

Question

I need to accurately measure the dimensions of text in a web application, I do this by creating an element (with the relevant CSS class), setting its innerHTML and then adding it using appendChild implemented in a container.

After doing this, you need to wait a while before the element is rendered, and its offsetWidth can be read to know the width of the text.

Currently, I'm using setTimeout(processText, 100) to wait for rendering to complete.

Is there any callback I can listen to, or a more reliable way to tell when the element I created has been rendered?

Answer 1

The accepted answer is from 2014 and is now out of date. setTimeout may work, but it's not the cleanest and doesn't necessarily guarantee that the element has been added to the DOM.

As of 2018, MutationObserver is what you should use to detect when an element is added to the DOM. MutationObservers are now widely supported in all modern browsers (Chrome 26, Firefox 14, IE11, Edge, Opera 15, etc.).

After adding an element to the DOM, you will be able to retrieve its actual dimensions.

This is a simple example of how to use MutationObserver to listen when an element is added to the DOM.

For the sake of brevity, I'm using jQuery syntax to build nodes and insert them into the 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!

The observer event handler fires whenever any node is added or removed from the document. Then, within the handler, we perform a contains check to determine if myElement is now inside the document.

You don't need to iterate over each MutationRecord stored in mutations because you can perform the document.contains check directly on myElement.

To improve performance, replace document with the specific element in the DOM that will contain myElement.

Answer 2

There are currently no DOM events indicating that the element has been fully rendered (such as additional CSS being applied and drawn). This may cause some DOM manipulation code to return errors or random results (such as getting the height of an element).

Using setTimeout to give the browser some rendering overhead is the easiest way. use

setTimeout(function(){}, 0)

is probably the most practically accurate, as it places your code at the end of the active browser event queue, without any delay - in other words, your code comes after the render operation (and everything else happening at the time) queue immediately).