Provides Tutorials on Web Technologies.

Comparing Window Load And Document Ready

  • Jquery provides Document Ready function which gets trigger once the DOM(Document Object Model).
  • Java Script has native load event which gets triggered when everything is loaded in browser including images.
  • "WINDOW" is one of the browser object.  "this" operator generally refers to window object.The other objects of browser are :-
  •  In this Demo, "We are running  some code on both the events to check which events get triggered fast".
  • The code file is document-ready-demo.html ,
<!DOCTYPE html>
<html>
    
    <head>
        <title>Dom Ready And Window Load</title>
        <style>
            .about {
                color:grey;
            }
            .dom-ready {
                color:green;
            }
            .window-load {
                color:blue;
            }
        </style>
    </head>
    
    <body>
        <ol id="statistic">
            <li class="about">Testing Widows Load And Jquery Document ready</li>
        </ol>
        <script src="./lib/jquery-1.9.0.min.js"></script>
        <script>
            $(document).ready(function () {
                var statistic = "<li class='dom-ready'>Jquery Document ready function executed : " + new Date().getMilliseconds() + "</li>";
                $("#statistic").append(statistic);
                console.log(statistic);
            })
             window.onload = function () {
                var statistic = "<li class='window-load'>Window Load function executed : " + new Date().getMilliseconds() + "</li>";
                $("#statistic").append(statistic);
                console.log(statistic);
            };
        </script>
    </body>

</html>
  • The firebug console output ,

  • The Browser output,
  • This shows Jquery Document ready function triggered first then window load.

Demo Code Download:- 

Demo Code Download Link