When Should I Use Jquery's Document.Ready Function

When should I use jQuery's document.ready function?

In simple words,

$(document).ready is an event which fires up when document is
ready.

Suppose you have placed your jQuery code in head section and trying to access a dom element (an anchor, an img etc), you will not be able to access it because html is interpreted from top to bottom and your html elements are not present when your jQuery code runs.

To overcome this problem, we place every jQuery/javascript code (which uses DOM) inside $(document).ready function which gets called when all the dom elements can be accessed.

And this is the reason, when you place your jQuery code at the bottom (after all dom elements, just before </body>) , there is no need for $(document).ready

There is no need to place on method inside $(document).ready only when you use on method on document because of the same reason I explained above.

    //No need to be put inside $(document).ready
    $(document).on('click','a',function () {
    })

    // Need to be put inside $(document).ready if placed inside <head></head>
    $('.container').on('click','a',function () {
    });

EDIT

From comments,

$(document).ready does not wait for images or scripts. Thats the big difference between $(document).ready and $(document).load
Only code that accesses the DOM should be in ready handler. If it's a plugin, it shouldn't be in the ready event.

When does document.ready() get invoked?

Simple anwser when the DOM/Document Object Model Gets Loaded when the HTML Gets Loaded..

Docs

Code included inside $( document ).ready() will only run once the page
Document Object Model (DOM) is ready for JavaScript code to execute.

I also explained it well here to:

https://discuss.codecademy.com/t/window-onload-vs-document-ready/19000

Where i said:

jQuery document.ready will run your code when the HTML is all ready, but before images and other resources have finished. This is the earliest possible time that you can change the DOM with JavaScript, so it's widely used. In Modern Browsers like google chrome it is replaced by DOMContentLoaded3. Again more info Here.

So by your picture:
Sample Image

$document.ready(fn) will be loaded at the beggining of interactive face when the Dom has "completed" loading...

What is the advantage of using jquery on ready instead call function

Only if you put the function at the very bottom of the page, there is no advantage. However, you usually want to have the choice to put code where you like it. $(document).ready() gives you this choice (actually the underlying javascript does).

Furthermore, for other programmers, it might not seem obvious that this function has to be executed right away when the page loads, and might therefor refactor the function somewhere else unknowingly. By using the document ready event, you're making your code more explicit i.e. saying "this piece of code needs to run as soon as the document has been loaded".

When should you not use $(document).ready(function() for event handlers?

This should never be the case, the jQuery document ready fires when the DOM has been loaded. It doesn't wait for the complete page (included images and the like) to load. It would be extremely rare that a user would be able to react in time to try and trigger something prior your code being executed. Read this: http://api.jquery.com/ready/

Specifically, the first paragraph:

While JavaScript provides the load event for executing code when a
page is rendered, this event does not get triggered until all assets
such as images have been completely received. In most cases, the
script can be run as soon as the DOM hierarchy has been fully
constructed. The handler passed to .ready() is guaranteed to be
executed after the DOM is ready, so this is usually the best place to
attach all other event handlers and run other jQuery code.

So using $(document).ready(function() { }) or the equivalent $(function() { }) is always a good practice.

EDIT: To further ensure that the user will never have trouble, make sure your scripts are all hosted alongside your site. For instance, jQuery has the option of using a CDN. CDNs are nice, but if for whatever reason the user can get to your site but not the CDN, it could leave your page in a useless state.

How does jQuery's document ready function work?

Check out the function bindReady in the source code.

They bind to the DOMContentLoaded event (or onreadystatechange on some browsers). They also have a fallback to the regular load event, in case the DOMContentLoaded isn't supported or not fired for other reasons. On browsers supporting it, they use this call:

document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );

On IE <9:

document.attachEvent( "onreadystatechange", DOMContentLoaded);

The second instance of DOMContentLoaded in these calls is their own function - actually a reference to the ready function right above bindReady in the source code. This function will check that the DOM tree is actually done by checking for document.body. If it doesn't exist yet, they wait a millisecond (using setTimeout) and check again. When document.body exists, they traverse the list of callbacks you've set.

Is $(document).ready necessary?

Is $(document).ready necessary?

no

if you've placed all your scripts right before the </body> closing tag, you've done the exact same thing.

Additionally, if the script doesn't need to access the DOM, it won't matter where it's loaded beyond possible dependencies on other scripts.

For many CMS's, you don't have much choice of where the scripts get loaded, so it's good form for modular code to use the document.ready event. Do you really want to go back and debug old code if you reuse it elsewhere?

off-topic:

As a side note: you should use jQuery(function($){...}); instead of $(document).ready(function(){...}); as it forces the alias to $.

Jquery. What is the difference between these functions $(document).ready and $(window).load?

window.onload = function() {

    alert( "welcome" );

};

Unfortunately, the code doesn't run until all images are finished downloading, including banner ads. To run code as soon as the document is ready to be manipulated, jQuery has a statement known as the ready event:

$( document ).ready(function() {

    // Your code here.

});

Source from http://learn.jquery.com/about-jquery/how-jquery-works/

Plus, $(document).ready(function(){}); It call function by call back. You can define many $(document).ready . It 'll run all .

window.onload = function(){} .
"assign" => When you define many window.onload = ..., It just run last function.

window.onload vs $(document).ready()

The ready event occurs after the HTML document has been loaded, while the onload event occurs later, when all content (e.g. images) also has been loaded.

The onload event is a standard event in the DOM, while the ready event is specific to jQuery. The purpose of the ready event is that it should occur as early as possible after the document has loaded, so that code that adds functionality to the elements in the page doesn't have to wait for all content to load.

When Should I Use Jquery's Document.Ready Function