Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
difference between onload, readyState, and DOMContentLoaded to see it look on javascript console log
<!DOCTYPE html>
// best way for me with experience
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
//your code here...
}, false);
window.onload = function () {
console.log(''+(+new Date)+': Onload fired');
document.onreadystatechange = function () {
console.log(''+(+new Date)+': Ready state changed');
if (document.readyState == "complete") {
console.log(''+(+new Date)+': Ready = Complete');
window.addEventListener("DOMContentLoaded", function () {
console.log(''+(+new Date)+': DOM Content Loaded');
<p>To see the difference between <code>onload</code> and <code>readyState == "complete"</code>
and <code>DOMContentLoaded</code>.</p>
<p>Run me with Firebug or Chrome Dev Tools, and cache disabled, and watch the console.</p>
<hr />
<img src="" />
<img src="" />
<img src="" />
<img src="" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment