Il codice jQuery può essere eseguito all'interno di due eventi specifici: l'evento load
dell'oggetto window
e l'evento ready
dell'oggetto document
. Il primo esegue il codice quando il documento non è ancora completo, mentre il secondo è invocato nel momento in cui tutto il documento è stato caricato. Vediamo insieme i dettagli.
L'evento load
Possiamo utilizzare questo evento quando non abbiamo bisogno di interagire con la struttura del documento, per esempio al fine di effettuare un preload delle immagini:
$(window).load(function() {
// codice
});
L'evento ready
Questo evento va usato quando dobbiamo interagire con la struttura del documento e quindi abbiamo bisogno che questo sia completo:
$(document).ready(function() {
// codice
});
Questo evento può anche essere scritto in forma abbreviata:
$(function() {
// codice
});
Combinare i due eventi
La priorità degli eventi è:
load
ready
Per usarli insieme dobbiamo utilizzare il seguente codice:
$(window).load(function() {
// codice su load()
$(function() {
// codice su ready()
});
});
Gli eventi load e ready in WordPress
In WordPress jQuery è già nel flusso dell'applicazione, quindi occorre inserire i nostri eventi all'interno della seguente funzione self-executing che crea una sandbox attorno al nostro codice:
(function($) {
// qui vanno load() e ready()
})(jQuery);