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?
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.
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.
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.
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.
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
.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With