Lisää
Pure JavaScript vastaa jQuery'n $.ready() - miten kutsua toimintoa, kun sivu/DOM on valmis sitä varten?
Okei, tämä saattaa olla vain typerä kysymys, vaikka olen varma, että monet muut ihmiset kysyvät samaa kysymystä aika ajoin. Itse haluan vain olla 100% varma asiasta kumminkin. JQueryn kanssa me kaikki tiedämme ihanan
$('document').ready(function(){});
Sanotaan kuitenkin, että haluan ajaa funktiota, joka on kirjoitettu tavallisella JavaScriptillä ilman kirjastoa sen tukena, ja että haluan käynnistää funktion heti, kun sivu on valmis käsittelemään sitä. Mikä'on oikea tapa lähestyä tätä?
Tiedän, että voin tehdä näin:
window.onload="myFunction()";
...tai voin käyttää body
-tagia:
<body onload="myFunction()">
...tai voin jopa kokeilla sivun alareunassa kaiken jälkeen, mutta body
- tai html
-tunnisteen lopussa, kuten:
<script type="text/javascript">
myFunction();
</script>
Mikä on selainten(vanha/uusi)-yhteensopiva tapa antaa yksi tai useampi funktio jQueryn tapaan $.ready()
?
1231
3
Yksinkertaisinta on vain laittaa kutsu koodiin rungon loppuun, jos ei ole olemassa kehystä, joka huolehtii selaintenvälisestä yhteensopivuudesta puolestasi. Tämä on nopeampi toteuttaa kuin
onload
-käsittelijä, koska tämä odottaa vain DOM:n olevan valmis, ei kaikkien kuvien latautumista. Ja tämä toimii kaikissa selaimissa.Nykyaikaisissa selaimissa (kaikki IE9:stä ja uudemmista sekä kaikki Chromen, Firefoxin tai Safarin versiot), jos haluat toteuttaa jQueryn kaltaisen
$(document).ready()
-metodin, jota voit kutsua mistä tahansa (huolehtimatta siitä, missä kutsuva skripti on sijoitettu), voit käyttää jotakin tämän kaltaista:Käyttö:
Jos tarvitset täydellistä selainten välistä yhteensopivuutta (mukaan lukien IE:n vanhat versiot) etkä halua odottaa
window.onload
-menetelmää, sinun kannattaa todennäköisesti katsoa, miten jQueryn kaltainen kehys toteuttaa$(document).ready()
-metodinsa. Se on melko monimutkaista selaimen ominaisuuksista riippuen.Annan sinulle pienen käsityksen siitä, mitä jQuery tekee (joka toimii missä tahansa script-tagi on sijoitettu).
Jos se on tuettu, se kokeilee standardia:
ja varasuunnitelmana on:
tai IE:n vanhemmissa versioissa se käyttää:
ja varajärjestelmä on:
Ja IE:n koodipolussa on joitakin kiertoteitä, joita en oikein ymmärrä, mutta näyttää siltä, että se liittyy jotenkin kehyksiin.
Tässä on jQueryn täydellinen korvike
.ready()
, joka on kirjoitettu tavallisella javascriptillä:Koodin uusin versio on jaettu julkisesti GitHubissa osoitteessa https://github.com/jfriend00/docReady.
Käyttö:
Tämä on testattu:
Toimiva toteutus ja testausympäristö: http://jsfiddle.net/jfriend00/YfD3C/
Tässä on yhteenveto siitä, miten se toimii:
docReady(fn, context)
.docReady(fn, context)
kutsutaan, tarkista, onko valmis käsittelijä jo lauennut. Jos on, ajoita juuri lisätty takaisinkutsu laukeamaan heti sen jälkeen, kun tämä JS-säie on päättynyt, komennollasetTimeout(fn, 1)
.document.addEventListener
on olemassa, asenna tapahtumakäsittelijät käyttämällä.addEventListener()
sekä"DOMContentLoaded"
- että"load"
-tapahtumille. "load" on varmuuden vuoksi varatapahtuma, eikä sitä pitäisi tarvita.document.addEventListener
ei ole olemassa, asenna tapahtumankäsittelijät käyttäen.attachEvent()
tapahtumille"onreadystatechange"
ja"onload"
.onreadystatechange
-tapahtumassa, onkodocument.readyState === "complete"
, ja jos on, kutsu funktiota, joka käynnistää kaikki ready-käsittelijät.docReady()
:lla rekisteröidyt käsittelijät aktivoidaan taatusti siinä järjestyksessä kuin ne on rekisteröity.Jos kutsut
docReady(fn)
sen jälkeen, kun dokumentti on jo valmis, takaisinkutsu ajoitetaan suoritettavaksi heti, kun nykyinen suoritussäie päättyysetTimeout(fn, 1)
:n avulla. Näin kutsuva koodi voi aina olettaa, että kyseessä ovat asynkroniset takaisinkutsut, joita kutsutaan myöhemmin, vaikka "myöhemmin" olisikin heti, kun nykyinen JS-säie päättyy, ja se säilyttää kutsujärjestyksen.Menetelmäsi (komentosarjan sijoittaminen ennen sulkevaa body-tagia)
on luotettava tapa tukea vanhoja ja uusia selaimia.
document.ondomcontentready=function(){}
pitäisi toimia, mutta se ei ole täysin yhteensopiva selaimen kanssa.Näyttää siltä, että sinun pitäisi vain käyttää jQuery min.