Ci sono diversi tipologie di funzioni Document Ready, utilizzati tipicamente in jQuery (aka jQuery DOM Ready). Diversi sviluppatori sembrano usarli senza sapere bene perché. Quindi cercherò di spiegare perché si può scegliere una versione piuttosto che un altra. Si pensi alla funzione document ready come una funzione di auto-esecuzione che si spara dopo che tutti gli elementi della pagina sono stati caricati.

Mentre JavaScript fornisce l’evento load per eseguire codice quando una pagina viene visualizzata, questo evento non viene attivato fino a quando tutte le attività, quali le immagini, applet, oggetti in flash, ecc., sono state completamente resi. Nella maggior parte dei casi, lo script può essere eseguito appena la gerarchia del DOM sia stata completamente costruita. Il gestore passato al metodo .ready() solventa l’esecuzione del codice dopo che il DOM è pronto, quindi questo è il posto migliore per attaccare tutti gli altri gestori di eventi ed eseguire altro codice jQuery. Quando si utilizzano gli script che si basano sul valore della proprietà di stile CSS, è importante fare riferimento a fogli di stile esterni o elementi di stile incorporati prima di fare riferimento con gli script da eseguire.
Nei casi in cui il codice si basi sul contento caricato (ad esempio, se le dimensioni di un’immagine sono richieste), il codice deve essere posto in un gestore per l’evento load().

Il metodo .ready() è generalmente incompatibile con l’attributo. Se si deve usare da un contenuto caricato, non usare metodo .ready(), utilizzare invece il metodo jQuery .load() per collegare i gestori di eventi ai contenuti caricati nella finestra o negli elementi specifici, come le immagini.

Vediamo cinque modi di usare il metodo .ready() con degli esempi.
Esempio 1

⤽
Copia codice 

$(document).ready(function() {
    // fare cose jQuery quando DOM è pronto
});
Esempio 2
⤽
Copia codice 

$(function(){
    //codice jQuery qui
});
Equivalente all’esempio 1 … hanno letteralmente lo stesso significato.
Esempio 3
⤽
Copia codice 

jQuery(document).ready(function($) {
    // fare cose jQuery quando DOM è pronto
});
Aggiungendo jQuery può aiutare a prevenire conflitti con altri framework JS.

Perché possono accadere conflitti?
I conflitti di solito accadono perché molte librerie/frameworks in JavaScript utilizzano lo stesso nome shortcut che è il simbolo del dollaro $. Poi se hanno gli stessi nomi di funzioni il browser si confonde!

Come si possono prevenire i conflitti?
Beh, per prevenire i conflitti si consiglia di usare un aliasing nello spazio dei nomi di jQuery (cioè usando l’esempio di sopra).

Poi, quando si chiama $.noConflict() per evitare gli inconvenienti con il namespace (come il collegamento a $ non è più disponibile) siamo costretti a scrivere jQuery ogni volta che viene richiesto.

Copia codice 

// ripristina la variabile '$' per altre librerie JS
jQuery.noConflict();
jQuery(document).ready( function(){
         // fare cose jQuery quando il DOM è pronto
         // e senza conflitti
   });
o con la funzione autoeseguibile
Copia codice 

 jQuery.noConflict();
 (function($) {
    // codice che utilizza $ come alias per jQuery
})(jQuery);
Esempio 4
⤽
Copia codice 

(function($) {
    // codice che utilizza $ come alias per jQuery
  $(function() {
    // altro codice che utilizza il simbolo $
    // come alias per jQuery
  });
})(jQuery);
// altro codice che utilizza il simbolo $
// come alias di un'altra libreria
In questo modo è possibile incorporare una funzione all’interno di una funzione che utilizza il simbolo $ come un alias di jQuery.
Esempio 5
⤽
Copia codice 

$(window).load(function(){ 
     // inizializza dopo che le immagini sono caricate 
});
A volte si vuole manipolare le immagini e con $(document).ready() non saremo in grado di farlo, a meno che il visitatore non ha l’immagine già caricata nella sua cache. In questo caso è necessario inizializzare la funzione di allineamento di jQuery quando l’immagine in questione termina di caricare.
Si potrebbe usare anche lo JavaScript piano e aggiungere la chiamata alla funzione attraverso il tag body in html; utilizzare questo metodo solo se non si sta utilizzando un framework JS.
Copia codice 

<body onLoad="CaricaMioJs()">
Per saperne di più: http://api.jquery.com/ready