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

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>

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

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.

Tags:

Javascript

Jquery

Onload

Document Ready

Recent Posts