Total Pageviews

Tuesday 5 April 2016

A Very Common Question : Difference between $(document).ready, $(window).load

I just want to simplify the difference between these two JQuery functions.
So as far as i understood the things between two listed below :

Before writing difference just to mention few things if anyone doesn't know i.e.

"$"  is a way to access/define JQuery.
"(document)" inside bracket we mention HTML elements on which we want to perform some actions and specifically it is called as "selector".
And .ready is function which is called to perform action.

$(document).ready :  This event occurs once HTML document is loaded and DOM tree is created and JavaScript code ready to manipulate elements. 

  • HTML document : This is document based on HTML tags and provides special meaning to the texts written in between.
  • DOM tree : DOM tree is a cross platform and language independent hierarchy of elements associated inside the HTML page. This is itself is a vast topic of discussion so we will discuss this later in brief.
$(window).load :  This executes later, once all the content of document is fully loaded.

For Example : If there is document containing many images then $(document).ready will trigger without loading images but $(window).load will not fire until loading of all the images is not completed. 

Its a best practice to write all jquery functions inside document.ready.

Try to Check :

<html>
<head>
    <script src="jquery-1.9.1.min.js"></script>
    <script>
    $( document ).ready(function() 
    {
        alert( "document loaded" +Idev);
    });

    $( window ).load(function() 
    {
        alert( "window loaded" +Idev);
    });
    </script>
</head>
<body>
    <div id='Idev' src="https://www.blogger.com"></div>
</body>
</html>

No comments:

Post a Comment

Microsoft Logo using flexbox and Reactjs

 <!DOCTYPE html> <html> <head>     <script src="https://unpkg.com/react@18/umd/react.development.js" crossori...