JQuery Tutorial 5:Difference Between Document.ready and window.load in JQuery


Using this JQuery Tutorial we will learn what are differences between the Document.Ready event and window.load event in the JQuery Sample Example.


In the Previous tutorials we have learnt How to debug javascript or jquery code in Internet Explorer, Mozilla firefox and Google chrome

In this JQuery Tutorial:
1. Document.Ready event will fire when ever DOM is loaded.
2. Window.load event will fire after loading all assets of the web page(Ex: Images, IFrames and others).

For more information

Output of below example: 

Please look on below example first DOM loaded pop up will come, after that window loaded pop up will come{After complete image is loaded in the webpage.}.

Sample program:


    <title>Differences between</title>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        //first DOM will load 
            $('document').ready(function() {
                alert('DOM loaded');
        //in this program, after image will load this event will fire. 
            $(window).load(function() {
                alert("window loaded");
     <img src="http://static4.businessinsider.com/image/5384c698ecad04a913dfdb95/google-made-the-tiniest-change-to-its-corporate-logo--see-if-you-can-even-spot-it.jpg" />

Output Video:

Post a Comment