Ren JavaScript-ækvivalent til jQuery's $.ready() - hvordan man kalder en funktion, når siden/DOM er klar til det
Okay, det er måske bare et dumt spørgsmål, selv om jeg er sikker på, at der er masser af andre, der stiller det samme spørgsmål fra tid til anden. Mig, jeg vil bare gerne være 100% sikker på det uanset hvad. Med jQuery kender vi alle den vidunderlige
$('document').ready(function(){});
Men lad os sige, at jeg ønsker at køre en funktion, der er skrevet i standard JavaScript uden noget bibliotek bagved, og at jeg ønsker at starte en funktion, så snart siden er klar til at håndtere den. Hvad'er den korrekte måde at gribe dette an på?
Jeg ved, at jeg kan gøre det:
window.onload="myFunction()";
...eller jeg kan bruge body
-tag:
<body onload="myFunction()">
...eller jeg kan endda prøve nederst på siden efter alt, men i slutningen af body
eller html
tagget som f.eks:
<script type="text/javascript">
myFunction();
</script>
Hvad er en cross-browser(gammel/ny)-kompatibel metode til at udstede en eller flere funktioner på en måde som jQuery's $.ready()
?
Det enkleste at gøre, hvis du ikke har en ramme, der klarer kompatibiliteten på tværs af browsere for dig, er blot at indsætte et kald til din kode i slutningen af kroppen. Dette er hurtigere at udføre end en
onload
-handler, fordi denne kun venter på at DOM'en er klar, ikke på at alle billeder indlæses. Og det virker i alle browsere.For moderne browsere (alt fra IE9 og nyere og enhver version af Chrome, Firefox eller Safari), hvis du ønsker at kunne implementere en jQuery-lignende
$(document).ready()
-metode, som du kan kalde fra hvor som helst (uden at bekymre dig om, hvor det kaldende script er placeret), kan du bare bruge noget som dette:Anvendelse:
Hvis du har brug for fuld kompatibilitet på tværs af browsere (herunder gamle versioner af IE), og du ikke ønsker at vente på
window.onload
, så bør du nok kigge på, hvordan et framework som jQuery implementerer sin$(document).ready()
-metode. Det'er ret indviklet afhængig af browserens muligheder.For at give dig en lille idé om hvad jQuery gør (som vil virke uanset hvor script tagget er placeret).
Hvis den understøttes, prøver den standarden:
med en fallback til:
eller for ældre versioner af IE, bruger den:
med en fallback til:
Og, der er nogle work-arounds i IE kode stien, som jeg ikke helt følger, men det ser ud til at det har noget at gøre med frames.
Her er en komplet erstatning for jQuery's
.ready()
skrevet i almindeligt javascript:Den seneste version af koden er delt offentligt på GitHub på https://github.com/jfriend00/docReady
Anvendelse:
Dette er blevet testet i:
Arbejdende implementering og testbed: http://jsfiddle.net/jfriend00/YfD3C/
Her er et resumé af, hvordan det fungerer:
docReady(fn, context)
docReady(fn, context)
kaldes, kontrolleres det, om ready-handleren allerede er blevet udløst. Hvis det er tilfældet, skal du blot planlægge den nyligt tilføjede callback til at blive udløst lige efter, at denne JS-tråd er afsluttet medsetTimeout(fn, 1)
.document.addEventListener
findes, installer da event handlers ved hjælp af.addEventListener()
for både&"DOMContentLoaded"
og"load"
events. "load" er en backup-hændelse af sikkerhedshensyn og bør ikke være nødvendig.document.addEventListener
ikke eksisterer, skal du installere event handlers ved hjælp af.attachEvent()
for&"onreadystatechange"
og"onload"
events.onreadystatechange
kontrolleres det, omdocument.readyState === "complete"
, og hvis det er tilfældet, kaldes en funktion, der affyrer alle ready-handlerne.Handlers registreret med
docReady()
er garanteret at blive affyret i den rækkefølge, de blev registreret.Hvis du kalder
docReady(fn)
efter at dokumentet allerede er klar, vil callbacken blive planlagt til at blive udført, så snart den aktuelle udførelsestråd er færdig medsetTimeout(fn, 1)
. Dette gør det muligt for den kaldende kode altid at antage, at der er tale om asynkrone callbacks, som vil blive kaldt senere, selv om senere er så snart den aktuelle JS-tråd er færdig, og det bevarer kaldsrækkefølgen.Din metode (placering af scriptet før det afsluttende body tag)
er en pålidelig måde at understøtte gamle og nye browsere på.
document.ondomcontentready=function(){}
skulle gøre tricket, men den er ikke fuldt ud kompatibel med browsere.Det ser ud til, at du bare skal bruge jQuery min