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

        
$(document).ready(function() {
    // fare cose jQuery quando DOM è pronto
});
Esempio 2
        
$(function(){ 
    //codice jQuery qui 
});
Equivalente all’esempio 1 … hanno letteralmente lo stesso significato.
Esempio 3
        
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.

        
// 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
        
 jQuery.noConflict();
 (function($) { 
    // codice che utilizza $ come alias per jQuery
})(jQuery);
Esempio 4
        
(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
$(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.
        
<body onLoad="CaricaMioJs()">
Per saperne di più: http://api.jquery.com/ready
Similari
Cos’è this?
11% JQuery
Uno degli aspetti più confusi di jQuery è come assegna l’ambito durante il callback. Deve essere parecchio confuso perché l’argomento genera un sacco di domande sulla mailing list di jQuery. Peccato, davvero, perché jQuery…
Il CDN di Google per distribuire il codice jQuery
9% JQuery
Troppo spesso, trovo del codice simile al seguente quando ispeziono il codice sorgente dei siti web che utilizzano jQuery: <script type="text/javascri…
redirect 301 usando mod_alias
9% Server
mod_alias è fondamentalmente la versione più semplice di mod_rewrite. Non può fare le cose che fa mod_rewrite, ad esempio modificare la stringa di query. Per eseguire reindirizzamenti nel server web Apache è possibile di u…
Il framework jQuery e jQuery-plugins
8% Plugins
jQuery è una ben nota libreria Javascript Web 2.0 light-weight cross-browser, sviluppato da un team guidato da John Resig. jQuery è costruito sulla cima di Sizzle, che è un motore per i selettori CSS scritto in Javascript …
Estendere Google Analytics con jQuery
7% Plugins
Da un bel po’ di tempo Google Analytics ha aperto la strada per la raccolta gratuita di statistiche del traffico del proprio sito web. Sono sicuro che molti di voi abbiano installato il codice di Google sui vostri siti e a…