About
A document is in a ready state when the DOM has been built.
Any work that tries to interact with the DOM should wait for the DOM to be ready.
HTML Page
For an HTML page, in a browser, all images are not finished downloading, including banner ads.
State
The readyNess can be read in the readyState property of the document
document.readyState
complete
The document.readyState property returns:
- loading while the Document is loading, (ie if the document is associated with an HTML parser, an XML parser, or an XSLT processor)
- interactive once it is finished parsing but still loading sub-resources,
- and complete once it has loaded.
The readystatechange event fires on the Document object when this value changes.
Run code at event
Native Javascript
In Native Javascript, dom ready is known as DomContentLoaded.
window.addEventListener('DOMContentLoaded', function () {
console.log("It's ready!")
})
Jquery
To run code as soon as the document is ready to be manipulated in Javascript - JQuery with the Ready event
$( document ).ready(function() {
// Your code here.
console.log("Ready !")
});