Question

171

Is there 'element rendered' event?

rated 0 times [ 173] [ 2] / answers: 1 / hits: 91360 / 11 Years ago, mon, april 8, 2013, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

cristinadomoniquel

Add To Favorites

Follow

Total Points: 320

Total Questions: 94

Total Answers: 94

Location: Moldova

Member since Sat, Aug 6, 2022

2 Years ago

cristinadomoniquel questions

1 find() vs map() in JavaScript

Wed, Apr 7, 21, 00:00, 3 Years ago

1 Get POST request body with express and fetch

Tue, Dec 1, 20, 00:00, 4 Years ago

1 Module parse failed: Unexpected token when using webpack 5

Mon, Nov 23, 20, 00:00, 4 Years ago

1 How to reset vuetify's v-input-file

Mon, Aug 17, 20, 00:00, 4 Years ago

1 Jest and ESLint: Expect must have a corresponding matcher call

Fri, Jul 31, 20, 00:00, 4 Years ago

View All

answered 11 Years ago ciarajourneyv · Accepted 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).