Quali sono le differenze tra il metodo JavaScript window.onload
e jQuery $(document).ready()
?
L'evento ready
si verifica dopo che il documento HTML è stato caricato, mentre l'evento onload
si verifica dopo, quando anche tutto il contenuto (ad esempio le immagini) è stato caricato.
L'evento onload
è un evento standard nel DOM, mentre l'evento ready
è specifico di jQuery. Lo scopo dell'evento ready
è che dovrebbe verificarsi il più presto possibile dopo che il documento è stato caricato, in modo che il codice che aggiunge funzionalità agli elementi nella pagina non debba aspettare che tutto il contenuto sia caricato.
window.onload
è l'evento JavaScript incorporato, ma poiché la sua implementazione aveva sottili stranezze tra i vari browser (Firefox, Internet Explorer 6, Internet Explorer 8, e Opera), jQuery fornisce document.ready
, che li astrae, e si attiva non appena il DOM della pagina è pronto (non aspetta le immagini, ecc.).
$(document).ready
(si noti che non è _document.ready`, che è indefinito) è una funzione jQuery, che avvolge e fornisce consistenza ai seguenti eventi:
document.ondomcontentready
/ document.ondomcontentloaded
- un evento più o meno nuovo che scatta quando il DOM del documento viene caricato (che può essere un po' di tempo prima che le immagini, ecc. vengano caricate); di nuovo, leggermente diverso in Internet Explorer e nel resto del mondowindow.onload
(che è implementato anche nei vecchi browser), che scatta quando l'intera pagina viene caricata (immagini, stili, ecc.)Una parola di cautela sull'uso di $(document).ready()
con Internet Explorer. Se una richiesta HTTP viene interrotta prima che l'intero documento sia caricato (per esempio, mentre una pagina è in streaming nel browser, un altro link viene cliccato) IE farà scattare l'evento $(document).ready
.
Se qualsiasi codice all'interno dell'evento $(document).ready()
fa riferimento a oggetti DOM, esiste la possibilità che questi oggetti non vengano trovati e che si verifichino errori Javascript. O sorvegliate i vostri riferimenti a questi oggetti, o rimandate il codice che fa riferimento a questi oggetti all'evento window.load.
Non sono stato in grado di riprodurre questo problema in altri browser (in particolare, Chrome e Firefox)