Sivu: DOMContentLoaded, load, beforeunload, unload

HTML-sivun elinkaarella on kolme tärkeää tapahtumaa:

• DOMContentLoaded – selaimen täysin ladattu HTML-koodi ja DOM-puu on rakennettu, mutta ulkoisia resursseja, kuten kuvia <img> ja tyylitaulukoita, ei ehkä ole vielä ladattu.
• load – HTML: n lisäksi ladataan myös kaikki ulkoiset resurssit: kuvat, tyylit jne.
• beforeunload/unload – käyttäjä poistuu sivulta.

Jokainen tapahtuma voi olla hyödyllinen:

• DOMContentLoaded tapahtuma – DOM on valmis , joten käsittelijä voi etsiä DOM-solmuja, alustaa käyttöliittymän.
• load -tapahtuma – ulkoisia resursseja ladataan, joten tyylejä käytetään, kuvakoot tunnetaan jne.
• beforeunload -tapahtuma – käyttäjä lähtee: voimme tarkistaa, tallensiko käyttäjä muutokset, ja kysyä, haluavatko he todella poistua.
• – käyttäjä melkein lähti, mutta voimme silti aloittaa joitain toimintoja, kuten tilastojen lähettämisen.

Tutkitaan näiden tapahtumien yksityiskohtia.

DOMContentLoaded

DOMContentLoaded -tapahtuma tapahtuu objektissa document.

Me täytyy käyttää addEventListener sen saamiseksi:

Esimerkiksi:

Esimerkissä DOMContentLoaded -käsittelijä toimii, kun asiakirja ladataan, jotta se voi nähdä kaikki elementit, mukaan lukien <img> alla.

Mutta se ei odota kuvan latautumista. Joten alert näyttää nollakokoja.

Ensi silmäyksellä DOMContentLoaded -tapahtuma on hyvin yksinkertainen. DOM-puu on valmis – tässä tapahtuma. Niitä on kuitenkin vähän.

DOMContentLoaded ja komentosarjat

Kun selain käsittelee HTML-asiakirjaa ja löytää <script> -tunnisteen, se on suoritettava ennen DOM: n rakentamisen jatkamista. Se on varotoimenpide, koska komentosarjat saattavat haluta muokata DOM: ää ja jopa document.write siihen, joten DOMContentLoaded on odotettava.

Joten DOMContentLoaded tapahtuu ehdottomasti tällaisten komentosarjojen jälkeen:

Yllä olevassa esimerkissä näemme ensin ”Kirjasto ladattu …” ja sitten ”DOM valmis!” (kaikki komentosarjat suoritetaan).

DOMContentLoaded ja tyylit

Ulkoiset tyylitaulukot eivät vaikuta DOM: iin, joten DOMContentLoaded ei odota niitä.

Mutta on kuoppa. Jos tyylin jälkeen on komentosarja, sen on odotettava, kunnes tyylitaulukko latautuu:

Syynä tähän on, että komentosarja saattaa haluta saada koordinaatit ja muut elementtien tyylistä riippuvat ominaisuudet, kuten yllä olevassa esimerkissä. Luonnollisesti sen on odotettava tyylien latautumista.

Kun DOMContentLoaded odottaa komentosarjoja, se odottaa nyt myös tyylit ennen niitä.

Sisäänrakennettu selaimen automaattinen täyttö

Firefox-, Chrome- ja Opera-automaattisen täytön lomakkeet DOMContentLoaded -palvelussa.

Esimerkiksi, jos sivulla on lomake sisäänkirjautumisella ja salasanalla, ja selain muisti arvot, sitten DOMContentLoaded -kohdassa se voi yrittää täyttää ne automaattisesti (jos käyttäjä on hyväksynyt sen).

Joten jos DOMContentLoaded lykkää pitkään latautuvat komentosarjat, niin myös automaattinen täyttö odottaa. Olet todennäköisesti nähnyt sen joillakin sivustoilla (jos käytät selaimen automaattista täyttöä) – kirjautumis- / salasanakenttiä ei täytetä automaattisesti heti, mutta sivun latautuminen viivästyy. Se on oikeastaan viive DOMContentLoaded -tapahtumaan.

window.onload

load window -objektin tapahtuma laukaisee, kun koko sivu ladataan, mukaan lukien tyylit, kuvat ja muut resurssit. Tämä tapahtuma on käytettävissä onload -ominaisuuden kautta.

Alla oleva esimerkki näyttää kuvakoot oikein, koska window.onload odottaa kaikki kuvat:

window.onunload

Kun kävijä poistuu sivulta, unload -tapahtuma laukaisee window. Voimme tehdä siellä jotain, johon ei liity viivettä, kuten sulkea liittyvät ponnahdusikkunat.

Huomattava poikkeus on analytiikan lähettäminen.

Oletetaan, että keräämme tietoja sivun tilasta. käytetty: hiiren napsautukset, vieritykset, tarkastellut sivualueet ja niin edelleen.

Luonnollisesti unload -tapahtuma on silloin, kun käyttäjä jättää meidät, ja haluamme tallenna tiedot palvelimellemme.

Se lähettää tiedot taustalla.Siirtyminen toiselle sivulle ei viivästy: selain poistuu sivulta, mutta suorittaa silti sendBeacon.

Näin sitä käytetään:

• Pyyntö lähetetään POST-muodossa.
• Voimme lähettää paitsi merkkijonon myös lomakkeita ja muita muotoja, kuten luvussa Nouto kuvataan, mutta yleensä se on tarkennettu objekti.
• Tietoja on rajoitettu 64 kt.

Kun sendBeacon -pyyntö on valmis, selain on todennäköisesti jo jättänyt asiakirjan, joten ei ole mitään tapaa saada palvelinvastausta (joka on yleensä tyhjä analytiikkaa varten).

Myös keepalive -lippu tällaisten ”sivun jälkeen vasemmalle” -pyyntöjen tekemiselle yleisten verkkopyyntöjen noutomenetelmässä. Löydät lisätietoja luvusta Hae sovellusliittymä.

Jos haluamme peruuttaa siirtymisen toiselle sivulle, emme voi tehdä sitä täällä. Mutta voimme käyttää toista tapahtuma – onbeforeunload.

window.onbeforeunload

Jos kävijä aloitti navigoinnin aw ay sivulta tai yrittää sulkea ikkunan, beforeunload -käsittelijä pyytää lisävahvistusta.

Jos peruutamme tapahtuman, selain voi kysyä vierailijalta he ovat varmoja.

Voit kokeilla sitä suorittamalla tämän koodin ja lataamalla sitten sivun uudelleen:

Historiallisista syistä myös tyhjän merkkijonon palauttaminen lasketaan peruutukseksi tapahtuma. Jokin aika sitten selaimet näyttivät sen viestinä, mutta kuten nykyaikainen spesifikaatio sanoo, niiden ei pitäisi.

Tässä on esimerkki:

Käyttäytymistä muutettiin , koska jotkut verkkovastaavat käyttivät väärin tätä tapahtumankäsittelijää näyttämällä harhaanjohtavia ja ärsyttäviä viestejä. Joten tällä hetkellä vanhat selaimet saattavat silti näyttää sen viestinä, mutta sen lisäksi – käyttäjälle näytettävää viestiä ei voida muokata.

readyState

Mitä tapahtuu, jos asetamme DOMContentLoaded -käsittelijä asiakirjan lataamisen jälkeen?

Se ei tietenkään toimi koskaan.

On tapauksia, joissa emme ole varmoja, onko asiakirja on valmis tai ei. Haluamme, että toimintomme suoritetaan, kun DOM ladataan, olipa se sitten vai myöhemmin.

Ominaisuus document.readyState kertoo meille nykyisestä lataustilasta.

Arvoja on 3:

• "loading" – asiakirja latautuu.
• "interactive" – asiakirja on luettu kokonaan.
• "complete" – asiakirja on luettu kokonaan ja kaikki resurssit (kuten kuvat) ladataan myös.

Joten voimme tarkistaa document.readyState ja asettaa käsittelijän tai suorittaa koodin heti, jos se on valmis.

Siellä on myös readystatechange -tapahtuma, joka laukaisee, kun tila muuttuu, joten voimme tulostaa kaikki nämä tilat näin:

readystatechange -tapahtuma on vaihtoehtoinen mekanismi asiakirjojen lataustilan seuraamiseksi, se ilmestyi kauan sitten. Nykyään sitä käytetään harvoin.

Katsotaanpa koko tapahtumien kulku täydellisyyden vuoksi.

Tässä on asiakirja, jossa on <iframe>, <img> ja tapahtumia kirjaavat käsittelijät:

Toimiva esimerkki on hiekkalaatikossa.

Tyypillinen tulos:

numerot hakasulkeissa tarkoittavat likimääräistä ajankohtaa, jolloin se tapahtuu. Samalla numerolla merkityt tapahtumat tapahtuvat suunnilleen samaan aikaan (± muutama ms).

• document.readyState tulee interactive ennen DOMContentLoaded. Nämä kaksi asiaa tarkoittavat samaa.
• document.readyState tulee complete, kun kaikki resurssit (iframe ja img) ladataan. Täällä voimme nähdä, että se tapahtuu suunnilleen samaan aikaan kuin img.onload (img on viimeinen resurssi) ja window.onload. Vaihto tilaan complete tarkoittaa samaa kuin window.onload. Erona on, että window.onload toimii aina kaikkien muiden load -käsittelijöiden jälkeen.

Yhteenveto

Sivun lataustapahtumat:

• DOMContentLoaded -tapahtuma laukaisee kohdasta document, kun DOM on valmis. Voimme käyttää JavaScriptiä tässä vaiheessa elementteihin.
  • Skripti, kuten <script>https://javascript.info/...</script> tai <script src="https://javascript.info/..."></script> estää DOMContentLoaded, selain odottaa niiden suorittamiseksi.
  • Kuvien ja muiden resurssien lataaminen voi silti jatkua.
• load tapahtuma window laukaisee, kun sivu ja kaikki resurssit ladataan. Käytämme sitä harvoin, koska yleensä ei tarvitse odottaa niin kauan.
• beforeunload -tapahtuma window laukaisee, kun käyttäjä haluaa poistua sivulta. Jos peruutamme tapahtuman, selain kysyy, haluaako käyttäjä todella poistua (esim. Meillä on tallentamattomia muutoksia).
• unload -tapahtuma ryhmässä window laukaisee, kun käyttäjä lopulta lähtee, käsittelijässä voimme tehdä vain yksinkertaisia asioita, joihin ei liity viivästyksiä tai käyttäjän pyytämistä. Tämän rajoituksen vuoksi sitä käytetään harvoin. Voimme lähettää verkkopyynnön osoitteella navigator.sendBeacon.
• document.readyState on asiakirjan nykyinen tila, muutoksia voidaan tehdä seurataan readystatechange -tapahtumassa:
  • loading – asiakirja latautuu.
  • interactive – asiakirja on jäsennetty, tapahtuu suunnilleen samaan aikaan kuin DOMContentLoaded, mutta ennen sitä.
  • complete – asiakirja ja resurssit ladataan, tapahtuu suunnilleen samaan aikaan kuin window.onload, mutta ennen sitä.