Window is loading first than DOM with jQuery on Google Chrome

Question

I'm new to jQuery.I have learned that DOM content will be loaded first and then window.onload event will occur as all the style sheets and images have to be loaded. But this doesn't turn out for me with the following code

 <!DOCTYPE html>
<html>
    <head>
        <title>Add Event Listener</title>
        <script type="text/javascript" src="../jquery-3.2.1.js"></script>
        <script type="text/javascript" >
            $(document).ready(function(){
                alert("DOM Loaded");
            });
            $(window).on("load",function(){
                alert("Window Loaded");
            });</script>
    </head>
    <body>

    </body>
</html>

After Opening this on Google Chrome (63.0.3239.108) I'm getting an alert that Window is Loaded prior to the alert of "DOM Loaded". Same problem with Microsoft Edge (40.15063.0.0)

But,this works fine with Firefox(57.0.3)

Can anyone explain this?

Thanks in advance ! This Question is not a duplicate of

window.onload seems to trigger before the DOM is loaded (JavaScript)

score 2 · Accepted Answer · answered Jan 04 '18 at 20:12

That is because you test it without any image to load...

So all the markup has been parsed and all loaded. So the load event occurs. Then when the script has been parsed, the ready occurs.

It usually is the script that is parsed faster, when there is images to load.

See below what happens when there is one.

$(document).ready(function(){
  alert("DOM Loaded");
});
$(window).on("load",function(){
  alert("Window Loaded");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img src="https://static.pexels.com/photos/132037/pexels-photo-132037.jpeg">

score 2 · Answer 2 · answered Jan 04 '18 at 20:16

2

They are events and are triggered by a state being achieved. They are not interdependent events, so they have no fixed order.

window.onload fires once all resources declared in the html document are downloaded.

document.onload fires once the dom is built.

They are not dependent on each other. The dom can be built prior to the last resource being downloaded. All of the resources could download prior to the dom being built.

answered Jan 04 '18 at 20:16

N-ate

6,051
2
40
48

1

This is also a good answer. Note that it means the order of those events is actually undefined. In chrome it might load window first one time and document the other. – erik258 Jan 04 '18 at 23:21

Window is loading first than DOM with jQuery on Google Chrome

2 Answers2