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
Fondamentali di jQuery
313% JQuery
[nextpage title=”Benvenuti”] jQuery stà diventando rapidamente uno strumento che ogni sviluppatore web di interfacce dovrebbe conoscere. Lo scopo di questo libro è di fornire una panoramica della biblioteca, in modo che qu…
Python per tutti
136% Python
[nextpage title=”Copertina”] Python para todos è un libro sulla programmazione in Python. Questo è un tutoriale su Python adatto a tutti i livelli e si può scaricare in pdf gratuitamente in spagnolo. Il tutoriale di Python…
Nuovi metodi in jQuery 1.6
66% JQuery
In questo articolo ci concentreremo sui nuovi metodi nella versione 1.6 della libreria jQuery JavaScript, così come i cambiamenti ai metodi già esistenti. Le informazioni fornite sono solo un riassunto veloce, raccomando u…
Oggetti Letterali con jQuery
37% JQuery
Si tratta di una traduzione di un articolo molto interessante originariamente apparso nel numero di marzo 2009 su JSMag, che descrive i passi a seguire per creare un Oggetto Letterale. [expand expanded=”true” title=”Usando…
Cos’è this?
35% 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…