All’interno della famiglia degli eventi (di cui abbiamo parlato nella precedente lezione) un ruolo di particolare importanza è ricoperto da .load() e .ready(). Questi due metodi, infatti, sono molto utilizzati da chi scrive applicazioni in jQuery, in quanto permettono di sfruttare due "momenti importanti" legati al caricamento della pagina.
Il metodo .load() consente di eseguire un dato codice solo al momento del completo caricamento di un dato elemento e dei sui figli. Questo metodo risulta molto utile in associazione con l’oggetto window: in questo modo, infatti, è possibile lanciare una funzione all’atto del completo caricamento della pagina (fogli di stile, script e grafica compresa).
$(window).on('load',function () {
alert('Finestra caricata completamente, compresa la grafica');
});Oppure, più brevemente:
$(window).load(function () {
alert('Finestra caricata completamente, compresa la grafica');
});Oltre che con l’ogetto window, questo metodo è utilizzato di frequente con le immagini per registrare il momento del completamento del caricamento delle stesse. Ad esempio:
$('img#miaFoto').load(function () {
alert('La mia foto è stata caricata!');
});Da non confondere con .load() è il metodo .ready() il quale si rivela, in molte circostanze, più utile del precedente quando si lavora con l’intero documento. Di solito, infatti, non c’è bisogno di attendere che tutta la pagina sia completa (per esempio che tutte le immagini siano state caricate), a volte basta solamente che sia pronto il DOM.
A catturare questo evento ci pensa, appunto, il metodo .ready() applicato all’oggetto document. Per registrare l’evento ready esistono tre sintassi alternative:
$(document).ready(function() {
alert('Il DOM è completo');
});$().ready(function() {
alert('Il DOM è completo');
});$(function() {
alert('Il DOM è completo');
});E’ il caso di segnalare che, a partire dalla versione 1.8 di jQuery la sintassi estesa che utilizza .on(‘ready’) è da considerare deprecata.
Vediamo, per finire, un esempio di utilizzo di questo metodo:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
$("p").text("Il DOM è stato caricato è può essere manipolato!");
});
</script>
</head>
<body>
<p>In attesa di caricamento...</p>
</body>
</html>