Ben's Hobbyhoekje -- Over $(document).ready()

Over $(document).ready()

In het item jQuery: wat het is en hoe je het kunt gebruiken wordt in het kort iets gezegd over jQuery. Op deze pagina wordt ingegaan op het hoe en waarom van de $(document).ready() function.
In het alledaagse taalgebruik noemt men dit gewoonlijk de document.ready function

Er worden twee items besproken:
1. De noodzaak van $(document).ready()
2. Je eigen scripts in combinatie met jQuery
De noodzaak van $(document).ready()
Voordat de jQuery-DOM kan worden gebruikt moeten de wijzigingen aan de "gewone" DOM zijn uitgevoerd. De function $(document).ready() controleert of of dat het geval is. Zodra de jQuery-DOM klaar is voor gebruik worden de opdrachten in $(document).ready() uitgevoerd.
Dit betekent dat je ook je eigen (niet-jQuery-)scripts moet starten vanuit de document.ready function.
Een script starten met het attribuut onload="…" van de <BODY>-tag gaat niet lukken. jQuery schakelt dat uit.
window.onload = … gebruiken in een script gaat dus ook niet goed!
Je eigen scripts in combinatie met jQuery
jQuery verandert het Document Object Model (DOM) van HTML en van JavaScript. Als je jQuery gebruikt zou je alles via jQuery moeten laten lopen. Als je de "gewone" DOM-referenties gebruikt, kun je voor vervelende verassingen komen te staan, omdat de elementen uit de "gewone" DOM geheel of gedeeltelijk kunnen zijn verdwenen of anders werken.
Als je dingen wilt doen die te maken hebben met het scherm of het document, doe je dat het veiligste met jQuery. Als je alleen berekeningen wilt uitvoeren, kun je dat probleemloos buiten jQuery om doen.
Denk in dit verband ook aan Internet diensten zoals Google Analytics (GA). In combinatie met jQuery zou dat ook problemen kunnen geven (GA doet dat overigens niet!). Voor sommige diensten (waaronder GA) zijn jQuery-plugins beschikbaar. Je hoeft daarmee geen aparte JavaScript-code te schrijven om die diensten te gebruiken. De plugin volstaat.

Opmerking:

De spelling $(document).ready() wordt het meest gebruikt. Je kunt het ook tegenkomen als $().ready() en als $().

Het dollarteken is een alias voor jQuery. Je kunt dus ook tegenkomen: jQuery(document).ready(), jQuery().ready(), enzovoort, maar ook window.jQuery(document).ready(), window.jQuery().ready(), enz., is mogelijk. jQuery() is nl. een function die wordt gemaakt in het window-object.