Zuiver JavaScript equivalent van jQuery's $.ready() - hoe roep je een functie aan wanneer de pagina/DOM er klaar voor is
Oké, dit is misschien gewoon een domme vraag, hoewel ik er zeker van ben dat er genoeg andere mensen zijn die af en toe dezelfde vraag stellen. Ik, ik wil er gewoon 100% zeker van zijn, hoe dan ook. Met jQuery kennen we allemaal het prachtige
$('document').ready(function(){});
Maar laten's zeggen dat ik een functie wil uitvoeren die geschreven is in standaard JavaScript zonder dat er een bibliotheek achter zit, en dat ik een functie wil starten zodra de pagina klaar is om het aan te kunnen. Wat's de juiste manier om dit te benaderen?
Ik weet dat ik kan doen:
window.onload="myFunction()";
...of ik kan de body
tag gebruiken:
<body onload="myFunction()">
...of ik kan zelfs proberen onderaan de pagina na alles, maar het einde body
of html
tag zoals:
<script type="text/javascript">
myFunction();
</script>
Wat is een cross-browser(oud/nieuw)-conforme methode om een of meer functies uit te geven op een manier zoals jQuery's $.ready()
?
Het eenvoudigste om te doen bij gebrek aan een framework dat alle cross-browser compatibiliteit voor je doet is om gewoon een oproep naar je code aan het einde van de body te zetten. Dit is sneller uit te voeren dan een
onload
handler omdat deze alleen wacht tot het DOM klaar is, niet tot alle afbeeldingen geladen zijn. En, dit werkt in elke browser.Voor moderne browsers (alles vanaf IE9 en nieuwer en elke versie van Chrome, Firefox of Safari), als je in staat wilt zijn om een jQuery-achtige
$(document).ready()
methode te implementeren die je overal vandaan kunt aanroepen (zonder je zorgen te maken over waar het aanroepende script is gepositioneerd), kun je gewoon iets als dit gebruiken:Gebruik:
Als je volledige cross browser compatibiliteit nodig hebt (inclusief oude versies van IE) en je wilt niet wachten op
window.onload
, dan moet je waarschijnlijk gaan kijken naar hoe een framework als jQuery zijn$(document).ready()
methode implementeert. Het is vrij ingewikkeld, afhankelijk van de mogelijkheden van de browser.Om je een beetje een idee te geven wat jQuery doet (wat overal zal werken waar de script tag is geplaatst).
Indien ondersteund, probeert het de standaard:
met een fallback naar:
of voor oudere versies van IE, gebruikt het:
met een fallback naar:
En, er zijn wat work-arounds in het IE code pad dat ik niet helemaal volg, maar het lijkt erop dat het iets te maken heeft met frames.
Hier is een volledige vervanger voor jQuery's
.ready()
geschreven in gewoon javascript:De laatste versie van de code is publiekelijk gedeeld op GitHub op https://github.com/jfriend00/docReady
Gebruik:
Dit is getest in:
Werkende implementatie en testbed: http://jsfiddle.net/jfriend00/YfD3C/
Hier's een samenvatting van hoe het werkt:
docReady(fn, context)
.docReady(fn, context)
wordt aangeroepen, controleer dan of de ready handler al gevuurd heeft. Als dat zo is, plan dan de nieuw toegevoegde callback om te vuren direct nadat deze thread van JS is afgelopen metsetTimeout(fn, 1)
.document.addEventListener
bestaat, installeer dan event handlers met.addEventListener()
voor zowel"DOMContentLoaded"
als"load"
events. De `"load" is een backup event voor de veiligheid en zou niet nodig moeten zijn.document.addEventListener
niet bestaat', installeer dan event handlers met behulp van
.attachEvent()voor
"onreadystatechange"en
"onload"` events.onreadystatechange
gebeurtenis, controleer of dedocument.readyState === "complete"
en zo ja, roep een functie aan om alle ready handlers af te vuren.Handlers geregistreerd met
docReady()
worden gegarandeerd uitgevoerd in de volgorde waarin ze zijn geregistreerd.Als je
docReady(fn)
aanroept nadat het document al klaar is, zal de callback gepland worden om uit te voeren zodra de huidige thread van uitvoering is voltooid metsetTimeout(fn, 1)
. Hierdoor kan de aanroepende code altijd aannemen dat het async callbacks zijn die later worden aangeroepen, zelfs als later is zodra de huidige thread van JS is afgelopen en het behoudt de volgorde van aanroepen.Uw methode (script plaatsen voor de afsluitende body tag)
is een betrouwbare manier om oude en nieuwe browsers te ondersteunen.
document.ondomcontentready=function(){}
zou de truc moeten doen, maar het heeft niet'volledige browser compatibiliteit.Het lijkt erop dat je gewoon jQuery min moet gebruiken