Shortcuts for jQuery's ready() method

Question

I have seen some shortcuts for the ready() method and would like to know which actually happens first, because my test results confuse me..

$(document).ready(function(){
    alert("document ready");
});

$(window).load(function(){
    alert("window ready");
});

(function($){
    alert("self invoke");
})(jQuery);

Here self invoke happens first, then document, then window. Is the self invoke technique considered a ready() method?

Answer 1

The third option is not a shortcut for .ready() (or jQuery related really), the self invoke runs immediately (as soon as it appears in the code), this is probably the shortcut you're thinking of though:

$(function(){
  alert("I'm a ready shortcut");
});

Passing a function into $(func) is a shortcut for $(document).ready(func);. The no-conflict version would look like this:

jQuery(function($) {
  //$ is jQuery
});

Answer 2

Nick Craver is right in what he says but I think it is worth noting that in that last example that it isn't actually doing anything with jquery at all. jQuery is being passed as a parameter to the anonymous function but the function isn't doing anything with it.

The last example is equivalent to an Immediately-Invoked Function Expression (IIFE):

(function(){
    alert("self invoke");
})();

And clearly this is just immediately calling the anonymous function as soon as that line of code is being hit and thus doing the alert. It isn't invoking jQuery at all which is why Nick is right when he says it is defintiely not a ready() method.

Answer 3

This article has a good explanation on how the first two are different:

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

jQuery offers two powerful methods to execute code and attach event handlers: $(document).ready and $(window).load. The document ready event executes already when the HTML-Document is loaded and the DOM is ready, even if all the graphics haven't loaded yet. If you want to hook up your events for certain elements before the window loads, then $(document).ready is the right place.

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

The window load event executes a bit later when the complete page is fully loaded, including all frames, objects and images. Therefore functions which concern images or other page contents should be placed in the load event for the window or the content tag itself.

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