Molti sviluppatori si chiedono se non sia possibile replicare l'evento ready() di jQuery per eseguire il codice solo quando il DOM è pronto. La risposta è si, ed in questo articolo vedremo appunto come creare una funzione che esegua il nostro codice al momento giusto.
La nostra funzione è la seguente:
function DOMLoaded(element, callback) {
if(element.addEventListener) {
element.addEventListener('DOMContentLoaded', callback, false);
} else {
if(document.body && document.body.lastChild) {
callback();
} else {
setTimeout(arguments.callee, 0);
}
}
}
La funzione usa l'evento standard DOMContentLoaded per i browser che lo supportano. In caso contrario, viene testata la presenza dell'elemento body e del suo ultimo figlio per essere sicuri che la pagina sia stata caricata. Qualora il documento non fosse ancora completo, la funzione viene eseguita nuovamente dopo l'attesa di un nanosecondo.
Ecco un esempio d'uso:
DOMLoaded(document, function() {
alert('DOM pronto!');
});
O in alternativa:
DOMLoaded(document.body, function() {
alert('DOM pronto!');
});
Potete visionare l'esempio finale in questa pagina.