CODEWITHSUNDEEP
javascriptjqueryhtmlgoogle-chromedom
R.S.S.H KRISHNA
R.S.S.H KRISHNA

Reputation: 95

Window is loading first than DOM with jQuery on Google Chrome

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)

Upvotes: 1

Views: 935

Answers (2)

N-ate
N-ate

Reputation: 6926

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.

Upvotes: 2

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

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

Upvotes: 2

Related Questions