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

Question

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>

You have no content in the page which affects the load event (ie. external CSS or imagery) therefore the `load` event fires almost instantly. I would imagine it fires before jQuery's document.ready event due to the inherent overhead with jQuery. If you add an `img` to your HTML, then the ready handler fires first - as is your expected behaviour. — Rory McCrossan, Nov 15 '16 at 11:36
@BharatPatidar that's the question the OP linked to in their question which states that the behaviour should be the opposite of what the OP is getting - which is the whole point of this question — Rory McCrossan, Nov 15 '16 at 11:37
@RoryMcCrossan I just tried to add different images to the code. It seems i have to add certain amount of images for the onload event to occur later which seems strange to me. Since even if its only one image, the onload event would have to wait longer for that image to be loaded and therefore occurs later. — Hoang Vu, Nov 15 '16 at 12:04

score 16 · Accepted Answer · answered Nov 20 '16 at 20:44

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>

score 4 · Answer 2 · answered Jan 30 '19 at 13:06

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.

Bharat · Answer 3 · 2016-11-15T12:22:56.650

1

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

edited Nov 15 '16 at 12:22

answered Nov 15 '16 at 11:45

Bharat

2,441
3
24
36

I just tried out your code. If I were to load only the first image, the behavior is still not as expected. Do you have some explanation for this? – Hoang Vu Nov 15 '16 at 11:55
@HoangVu now you can see there is only one image and `onload` event is firing after `ready`, you can understand what i mean. image size was smaller so it wasn't took more time then time needed to `DOM` to be ready – Bharat Nov 15 '16 at 12:18
@BharatPatridar I can see that the size/amount of the images matter but does that mean the `onload` event doesn't need to wait for the `DOM` to be fully loaded or does the `ready` event waits for something more than `onload` without the images? – Hoang Vu Nov 15 '16 at 12:25
if there is nothing like (css ,images) then `onload` doesn't care for `DOM` to ready and `DOM` does not wait for image to be fully loaded – Bharat Nov 15 '16 at 12:37
1

Sorry but I dont think that is correct since the `DOM` is always ready before the page is fully loaded [link](https://api.jquery.com/ready/). The `DOMContentLoaded` event also always fires before the `onload` event regarless of the presence of images. Therefore my conclusion is that jQuery's `$(document).ready` does not only waits for the `DOM` to be ready but also something else. And when exactly jQuery's `ready` event is fired relatively to `window.onload` still remains my question. – Hoang Vu Nov 15 '16 at 15:45

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

3 Answers3

Linked