funkybro funkybro - 5 months ago 11
Javascript Question

How to tell when a dynamically created element has rendered

I need to accurately measure the dimensions of text within my web app, which I am achieving by creating an element (with relevant CSS classes), setting its

innerHTML
then adding it to the container using
appendChild
.

After doing this, there is a wait before the element has been rendered and its
offsetWidth
can be read to find out how wide the text is.

Currently, I'm using
setTimeout(processText, 100)
to wait until the render is complete.

Is there any callback I can listen to, or a more reliable way of telling when an element I have created has been rendered?

Answer

There is currently no DOM event indicating that an element has been fully rendered (eg. attached CSS applied and drawn). This can make some DOM manipulation code return wrong or random results (like getting the height of an element).

Using setTimeout to give the browser some overhead for rendering is the simplest way. Using

setTimeout(function(){}, 0)

is perhaps the most practically accurate, as it puts your code at the end of the active browser event queue without any more delay - in other words your code is queued right after the render operation (and all other operations happening at the time).