In chrome's Developer tool, the blue vertical line labeled "DOMContent event fired", and the red line labed "load event fired". Does "DOMContent event fired" means the browser begin to execute the inline javascript? And "load event fired" means it fire "onload" event?
Differences. The DOMContentLoaded event fires when all the nodes in the page have been constructed in the DOM tree. The load event fires when all resources such as images and sub-frames are loaded completely.
The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. A different event, load , should be used only to detect a fully-loaded page.
The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images. This is in contrast to DOMContentLoaded , which is fired as soon as the page DOM has been loaded, without waiting for resources to finish loading.
"DOMContent Event" is from webkit (which chrome relies on) and is equivelant to DOMContentLoaded msdnmdn.
The DOMContentLoaded event fires when parsing of the current page is complete; the load (onload) event fires when all files have finished loading from all resources, including ads and images. DOMContentLoaded is a great event to use to hookup UI functionality to complex web pages.
See the demo here, related question.
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