Why does window.onload event occur before $(document).ready?

Why does window.onload event occur before $(document).ready?

window on load', function not working
call javascript function after page load complete
document ready vs window load
domcontentloaded vs load
window.addeventlistener load not working
window load complete event
jquery before page load
window.addeventlistener reload

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>

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>

Why does window.onload event occur before $(document).ready , If you want to hook up your events for certain elements before the window loads, then $(document).ready is the right place. Code: The first time that window.onload is called, window.onload itself is undefined, so what gets returned is an anonymous function with only myNewFunction() inside. On subsequent window.onload assignments, window.onload does exist, so whatever it holds will be wrapped up with the new function. And so the list grows.


@RoryMcCrossan saying is right, you have nothing in your html to be load on window like(image,video etc ). Now you can see how behavior of event is changed

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
   <img src="http://www.wallpapereast.com/static/images/Unique-And-Beautiful-Wallpaper-HD.jpg" alt="Alternate Text" />

  
</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>

jQuery: When to use $(document).ready() and when $(window).load(), Before clarifying the difference between $(document).ready() DOM is fully ready so weird errors and things can happen so you have to make sure to wrap You can use the JavaScript pure load event in this way. window. The onload event occurs when an object has been loaded. onload is most often used within the <body> element to execute a script once a web page has completely loaded all content (including images, script files, CSS files, etc.).


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.

[TIP] $(document).ready() vs window.onload() vs , The $(window).load() event on the window and/or body element will fire once all the $(document).ready() event fires before all images,iframes etc. are loaded, ready event is that it should occur as early as possible after the document has  First, you cannot have multiple scripts automatically assigning the onload event, because one will replace the other. Second, the onload event loads very late, compared with putting the script at


Page: DOMContentLoaded, load, beforeunload , Though both jQuery ready event and window onload event is used to defined in jQuery $(document).ready() executes before code defined  A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.


Difference between document.ready() and body onload()?, $(doccument).ready(function(){}); :- It invokes when all the HTML element loaded to the page. window.onload(); :- It invokes after the whole page loaded to the DOM. Hi harish, The ready event occurs after the HTML document has and defines several useful events e.g. onload, before jQuery comes,  Focus and Validation Events. When you change the focus by using the keyboard (TAB, SHIFT+TAB, and so on), by calling the Select or SelectNextControl methods, or by setting the ActiveControl property to the current form, focus events of the Control class occur in the following order:


Difference between jQuery Document Ready Method , A simple explanation of how to decide when your JavaScript code should run. Script tags have access to any element which appears before them in the HTML. The load event occurs when all of the HTML is loaded, and any subresources like window.addEventListener('load', function(){ // Everything has loaded! });  With $(document).ready(), you can get your events to load or fire or whatever you want them to do before the window loads. Everything that you stick inside its brackets is ready to go at the earliest possible moment — as soon as the DOM is registered by the browser, which allows for some nice hiding and showing effects and other stuff