Skip to content

Instantly share code, notes, and snippets.

@AysadKozanoglu

AysadKozanoglu/readyState_onLoad_example.html

Last active April 20, 2023 11:14
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save AysadKozanoglu/c43ea4debbbf5b7af918ead8712b0924 to your computer and use it in GitHub Desktop.
Save AysadKozanoglu/c43ea4debbbf5b7af918ead8712b0924 to your computer and use it in GitHub Desktop.
Download ZIP
difference between onload, readyState, and DOMContentLoaded to see it look on javascript console log
Raw
readyState_onLoad_example.html
<!DOCTYPE html>
<html>
<head>
<script>
// 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');
});
</script>
</head>
<body>
<h1>Test</h1>
<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="http://i.imgur.com/owuVS.gif" />
<img src="http://i.imgur.com/1sE1n.jpg" />
<img src="http://i.imgur.com/A2s1e.jpg" />
<img src="http://i.imgur.com/BaFin.jpg" />
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment