Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the DOM ready event?

Tags:

I need to fire a script as soon as the page content (the whole HTML element) has been received, but it doesn't have to be rendered yet.

I assume that just having a simple <script> tag that executes some code at the very top of my page should do the trick?

To formulate the question differently: does DOM ready mean that all elements and resources have been pulled and rendered?

like image 848
silkAdmin Avatar asked Sep 28 '12 09:09

silkAdmin


People also ask

How do you know when your DOM is ready?

There are two points you can have the code executed with a complete DOM tree: "load" and "DOMContentLoaded". The later is fired much earlier than the latter. Document. ready function fires as soon as the DOM is loaded and ready to be manipulated by script.

What do you mean by document ready event?

The document ready event signals that the DOM of the page is now ready, so you can manipulate it without worrying that parts of the DOM has not yet been created. The document ready event fires before all images etc. are loaded, but after the whole DOM itself is ready.

What is DOMContentLoaded used for?

The DOMContentLoaded event is a useful event that can make a big impact on the performance of your pages, hence this example. It fires when the HTML and scripts that make up the page have loaded, but not necessarily the images or CSS.

On what event target should we listen for the DOMContentLoaded event?

The original target for this event is the Document that has loaded. You can listen for this event on the Window interface to handle it in the capture or bubbling phases.


2 Answers

DOM ready means that all the HTML has been received and parsed by the browser into the DOM tree which can now be manipulated.

It occurs before the page has been fully rendered (as external resources may have not yet fully downloaded - including images, CSS, JavaScript and any other linked resources).

The actual event is called window.DOMContentLoaded.

like image 97
Oded Avatar answered Sep 30 '22 07:09

Oded


DOMready means: The DOM structure has been built in browser memory. Asynchronously the page already started rendering, but it might not be finished yet as external resources like images, videos etc. will finish loading later.

like image 29
devnull69 Avatar answered Sep 30 '22 06:09

devnull69