Menu
As stated in this thread: window.onload vs $(document).ready(). The window.onload should occur later than the $(document).ready() but in this simple code the log would show that the onload event is executed before the ready event? What I'm I missing here?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<h1>A Simple Site</h1>
<script>
$(document).ready(function() {
console.log("ready event fired");
})
window.onload = function() {
console.log("onload event fired");
}
</script>
</body>
</html>
457
The ready event occurs after the HTML document has been loaded, while the onload event occurs later, when all content (e.g. images) also has been loaded.
The key difference between $(document). ready() and $(window). load() event is that the code included inside onload function will run once the entire page(images, iframes, stylesheets,etc) are loaded whereas the $(document). ready() event fires before all images,iframes etc.
The general idea is that window. onload fires when the document's window is ready for presentation and document. onload fires when the DOM tree (built from the markup code within the document) is completed.
The window. onload property is created by the browser and exists by default. By default is has a value of null . But, if you assign a function to it (so it contains a valid function instead of null ), then the browser will call that function when the page resources have finished loading.
The problem is not with the order of the events. It with the jQuery wrapper around the native DOM events. If you try the native DOMContentLoaded you will find that it always runs before window.onload. But the jQuery event
$(document).ready will come some milliseconds after DOMContentLoaded, which in some cases might be after window.onload too, especially if the page doesn't have much to load like the code below. This is delay is due to jQuery implementation.
If you uncomment the iframe in the code though, it takes some time to load which causes the window.onload to be delayed, so $(document).ready will come first.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<h1>A Simple Site</h1>
<!-- <iframe src="http://stackoverflow.com"></iframe> -->
<script>
$(document).ready(function() {
console.log("jQuery ready");
})
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM ready");
});
window.onload = function() {
console.log("DOM loaded");
}
</script>
</body>
</html>This is a "feature" of jQuery 3. jQuery 1.X has always handled $(document).ready before $(window).on('load'). Furthermore, $(window).load() can be considered as an event when page is rendered. I'm 100% certain in this because now I just had an attempt to upgrade jQuery version to 3.X in a project that's been working stable with jQuery 1.X for almost 10 years. So this attempt has turned into a month of headache struggling with $(document).ready and $(window).load. Finally it was decided to leave it with jQuery 1.12.4, the latest of 1.X generation.
23
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
