Is there 'element rendered' event?
dom, javascript
Solution
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).
Problem
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?
Related problems
- Get the size of the screen, current web page and browser window
- How to add onload event to a div element
- How can I check if an element exists in the visible DOM?
- Why is setTimeout(fn, 0) sometimes useful?
- How can I determine if a dynamically-created DOM element has been added to the DOM?
- Is is possible to determine when an element has been rendered using JavaScript?