Whats is the difference between these document ready types? When to use them?

Question

I have been looking around a bit and haven't really been able to find something that says when is best to use these document ready types. The main one i use is $(document).ready(function() { because the syntax is clean and easy to read for me but is there an advantage of using this or not using this over the following?

Example 1:

$(document).ready(function() {

Example 2:

(function($) { 
    // code here
  $(function() {
    // code here
  });
})(jQuery);

Example 3:

$(window).load(function(){  
     //code here 
}); 

Example 4:

jQuery(document).ready( function(){

Example 5:

jQuery(document).ready(function($) {
    //code here
});

Example 6:

$(function(){

I know there are a few questions on here about this but mine is asking for examples of when to actually use these and how it will benefit from the others to use it?

Answer 1

To understand ready(), you need to know about DOMContentLoaded event.

The DOMContentLoaded event is fired when the document has been completely downloaded and parsed, all the external scripts and internal scripts are downloaded and executed and DOM is ready to start manipulating. This event will not wait for stylesheets, images, and subframes to finish loading. There's a load event which can be used to detect a fully-loaded page.

As you can see here DomContentLoaded event is supported by almost all browsers except below < IE9. There're events like readystatechange which can be used to emulate DOMContentLoaded in IE8 and in IE7, we need to call doScroll() and see if throws an exception, it will not throw any exception once DOM is loaded.

Instead of you worrying about these cross-browser differences, ready() in jQuery abstracts the functionality to pass callback to invoke on DOMContentLoaded event.

DOMContentLoaded event started at FF and later adopted by all main stream browsers like Chrome, Opera and IE but standardised in HTML5. This event will fire only in case of documents where as load will be triggered on successful loading of any resource like <script> <img>. Now know that we know that there's a gap between DOMContentLoaded and load events, many people use this event's callback to do some javascript initilization while other resources are being loaded.

You can even see these events with tools like DeveloperTools in Chrome

Example 2 and Example 1 are both same in terms of their functionality-used to pass a callback for DOMContentLoaded, except that in 2nd one, you're passing jQuery as argument but reading it as $, so all the functions inside that function expression can work with $ and you can still have some other library outside using $ as global object with its own functions, that way conflict between two libraries using same $ as global object is resolved.

Example 1 & 4 are same but with minor difference of using $ or jQuery as global object, some other library might be using $ for their code but it's highly unlikely that jQuery is used as global object in some other library (For Example, AngularJS has its own global object angular )

Example 5 is again using jQuery on the outside and $ in the function callback. So once again namespace conflicts with $ are resolved.

Hope this gives some insight :)

Answer 2

All are exactly the same apart from 3.

From jQuery - What are differences between $(document).ready and $(window).load?

$(document).ready(function() {
 // executes when HTML-Document is loaded and DOM is ready
 alert("document is ready");
});


$(window).load(function() {
 // executes when complete page is fully loaded, including all frames, objects and images
 alert("window is loaded");
});