Wat zijn de verschillen tussen JavaScript's window.onload
en jQuery's $(document).ready()
methode?
De ready
event treedt op nadat het HTML document is geladen, terwijl de onload
event later optreedt, wanneer alle inhoud (b.v. afbeeldingen) ook is geladen.
De onload
event is een standaard event in het DOM, terwijl de ready
event specifiek is voor jQuery. Het doel van de ready
event is dat het zo vroeg mogelijk na het laden van het document optreedt, zodat code die functionaliteit aan de elementen in de pagina toevoegt niet hoeft te wachten tot alle content geladen is.
window.onload
is het ingebouwde JavaScript event, maar omdat de implementatie ervan subtiele eigenaardigheden had in verschillende browsers (Firefox, Internet Explorer 6, Internet Explorer 8, en Opera), biedt jQuery document.ready
, dat die weg abstraheert, en afvuurt zodra de pagina's DOM klaar is (wacht niet op afbeeldingen, etc.).
$(document).ready
(merk op dat het niet document.ready
is, dat ongedefinieerd is) is een jQuery functie, die de volgende gebeurtenissen omhult en consistentie verschaft:
document.ondomcontentready
/ document.ondomcontentloaded
- een nieuwachtig event dat afgaat wanneer het DOM van het document wordt geladen (wat enige tijd voor het laden van de afbeeldingen enz. kan zijn); opnieuw, iets anders in Internet Explorer en in de rest van de wereldwindow.onload
(die zelfs in oude browsers is geïmplementeerd), die afvuurt wanneer de hele pagina wordt geladen (afbeeldingen, stijlen, enz.)Een woord van waarschuwing bij het gebruik van $(document).ready()
met Internet Explorer. Als een HTTP verzoek wordt onderbroken voordat het hele document is geladen (bijvoorbeeld, terwijl een pagina naar de browser streamt, wordt er op een andere link geklikt) zal IE het $(document).ready
event triggeren.
Als code binnen het $(document).ready()
event verwijst naar DOM objecten, bestaat de mogelijkheid dat deze objecten niet gevonden worden, en Javascript fouten kunnen optreden. Ofwel bewaak je verwijzingen naar deze objecten, ofwel stel je code die naar deze objecten verwijst uit naar het window.load event.
Ik heb dit probleem niet kunnen reproduceren in andere browsers (met name Chrome en Firefox)