Side: DOMContentLoaded, load, before unload, unload (Norsk)

Livssyklusen til en HTML-side har tre viktige hendelser:

• DOMContentLoaded – nettleseren er fullastet HTML, og DOM-treet er bygget, men eksterne ressurser som bilder <img> og stilark har kanskje ikke lastet inn ennå.
• load – ikke bare HTML er lastet, men også alle eksterne ressurser: bilder, stiler osv.
• beforeunload/unload – brukeren forlater siden.

Hver hendelse kan være nyttig:

• DOMContentLoaded hendelse – DOM er klar , slik at behandleren kan slå opp DOM-noder, initialisere grensesnittet.
• load hendelse – eksterne ressurser lastes inn, slik at stiler brukes, bildestørrelser er kjent osv.
• beforeunload hendelse – brukeren går: vi kan sjekke om brukeren lagret endringene og spørre dem om de virkelig vil dra.
• – brukeren gikk nesten, men vi kan fortsatt starte noen operasjoner, for eksempel å sende ut statistikk.

La oss utforske detaljene i disse hendelsene.

DOMContentLoaded

DOMContentLoaded hendelsen skjer på document objektet.

Vi må bruke addEventListener for å fange den:

For eksempel:

I eksemplet kjøres DOMContentLoaded -håndtereren når dokumentet lastes inn, slik at det kan se alle elementene, inkludert <img> nedenfor.

Men det venter ikke på at bildet skal lastes inn. Så alert viser null størrelser.

Ved første øyekast er DOMContentLoaded hendelsen veldig enkel. DOM-treet er klart – her er arrangementet. Det er imidlertid få særegenheter.

DOMContentLoaded og skript

Når nettleseren behandler et HTML-dokument og kommer over en <script> -tag, er det må utføres før du fortsetter å bygge DOM. Det er en forholdsregel, ettersom skript kanskje vil endre DOM, og til og med document.write i den, så DOMContentLoaded må vente.

Så DOMContentLoaded skjer definitivt etter slike skript:

I eksemplet ovenfor ser vi først «Bibliotek lastet …», og deretter «DOM klar!» (alle skripter kjøres).

DOMContentLoaded og styles

Eksterne stilark påvirker ikke DOM, så DOMContentLoaded venter ikke på dem.

Men det er en fallgruve. Hvis vi har et skript etter stilen, må skriptet vente til stilarket lastes inn:

Årsaken til dette er at skriptet kanskje vil ha koordinater og andre stilavhengige egenskaper til elementer, som i eksemplet ovenfor. Naturligvis må den vente på at stiler skal lastes inn.

Når DOMContentLoaded venter på skript, venter den nå også på stiler før dem.

Innebygd autofyll i nettleser

Autofyll for Firefox, Chrome og Opera på DOMContentLoaded.

Hvis siden for eksempel har en skjema med pålogging og passord, og nettleseren husket verdiene, og på DOMContentLoaded kan den prøve å fylle dem automatisk (hvis godkjent av brukeren).

Så hvis DOMContentLoaded blir utsatt med skripter med lang belastning, så venter også autofyll. Du har sannsynligvis sett at på noen nettsteder (hvis du bruker autofyll i nettleseren) – påloggings- / passordfeltene blir ikke automatisk fylt ut umiddelbart, men det er en forsinkelse til siden lastes helt inn. Det er faktisk forsinkelsen til DOMContentLoaded hendelsen.

window.onload

load hendelse på window -objektet utløses når hele siden er lastet inkludert stiler, bilder og andre ressurser. Denne hendelsen er tilgjengelig via onload -egenskapen.

Eksemplet nedenfor viser riktig bildestørrelser, fordi window.onload venter på alle bilder:

window.onunload

Når en besøkende forlater siden, utløses unload hendelsen på window. Vi kan gjøre noe der som ikke innebærer en forsinkelse, som å lukke relaterte popup-vinduer.

Det bemerkelsesverdige unntaket er å sende analyser.

La oss si at vi samler inn data om hvordan siden er brukt: museklikk, ruller, viste sideområder og så videre.

Naturligvis er unload hendelsen når brukeren forlater oss, og vi vil gjerne lagre dataene på serveren vår.

Den sender dataene i bakgrunnen.Overgangen til en annen side er ikke forsinket: nettleseren forlater siden, men utfører fortsatt sendBeacon.

Slik bruker du den:

• Forespørselen sendes som POST.
• Vi kan ikke bare sende en streng, men også skjemaer og andre formater, som beskrevet i kapitlet Hent, men vanligvis er det et strenget objekt.
• Dataene er begrenset med 64 kb.

Når sendBeacon forespørselen er ferdig, har nettleseren sannsynligvis allerede forlatt dokumentet, så det er ingen måte å få serverrespons (som vanligvis er tom for analyse).

Det er også et keepalive -flagg for å gjøre slike «etter-side-venstre» -forespørsler i hentemetode for generiske nettverksforespørsler. Du finner mer informasjon i kapittelet Hent API.

Hvis vi vil avbryte overgangen til en annen side, kan vi ikke gjøre det her. Men vi kan bruke en annen hendelse – onbeforeunload.

window.onforunload

Hvis en besøkende startet navigering aw ay fra siden eller prøver å lukke vinduet, ber beforeunload handler om ytterligere bekreftelse.

Hvis vi avbryter hendelsen, kan nettleseren spørre den besøkende om de er sikre.

Du kan prøve det ved å kjøre denne koden og deretter laste siden på nytt:

Av historiske årsaker teller også retur av en ikke-streng streng som annullering hendelsen. For en tid tilbake viste nettlesere det som en melding, men som den moderne spesifikasjonen sier, burde de ikke.

Her er et eksempel:

Atferden ble endret , fordi noen nettredaktører misbrukte denne hendelsesbehandleren ved å vise misvisende og irriterende meldinger. Så akkurat nå kan gamle nettlesere fremdeles vise det som en melding, men bortsett fra det – det er ingen måte å tilpasse meldingen som vises for brukeren.

readyState

Hva skjer hvis vi setter inn DOMContentLoaded -håndtereren etter at dokumentet er lastet inn?

Naturligvis kjører det aldri.

Det er tilfeller der vi ikke er sikre på om dokumentet er klart eller ikke. Vi vil at funksjonen vår skal utføres når DOM er lastet, enten det er nå eller senere.

document.readyState -egenskapen forteller oss om gjeldende lastetilstand.

Det er tre mulige verdier:

• "loading" – dokumentet lastes inn.
• "interactive" – dokumentet ble lest fullstendig.
• "complete" – dokumentet ble lest og alle ressurser (som bilder) er lastet inn også.

Så vi kan sjekke document.readyState og sette opp en behandler eller utføre koden umiddelbart hvis den er klar.

Det er også readystatechange hendelsen som utløses når tilstanden endres, slik at vi kan skrive ut alle disse tilstandene slik:

readystatechange event er en alternativ mekanikk for å spore dokumentinnlastingstilstanden, det dukket opp for lenge siden. I dag brukes det sjelden.

La oss se hele hendelsesflyten for fullstendigheten.

Her er et dokument med <iframe>, <img> og håndtere som logger hendelser:

Arbeidseksemplet er i sandkassen.

Den typiske utgangen:

tall i hakeparentes betegner omtrentlig tid for når det skjer. Hendelser merket med samme siffer skjer omtrent samtidig (± noen få ms).

• document.readyState blir interactive rett før DOMContentLoaded. Disse to tingene betyr faktisk det samme.
• document.readyState blir complete når alle ressurser (iframe og img) er lastet inn. Her kan vi se at det skjer omtrent samtidig som img.onload (img er den siste ressursen) og window.onload. Å bytte til complete tilstand betyr det samme som window.onload. Forskjellen er at window.onload alltid fungerer etter alle andre load håndterere.

Sammendrag

Sideinnlastningshendelser:

• DOMContentLoaded hendelsen utløses på document når DOM er klar. Vi kan bruke JavaScript på elementer på dette stadiet.
  • Skript som <script>https://javascript.info/...</script> eller <script src="https://javascript.info/..."></script> blokkerer DOMContentLoaded, nettleseren venter for at de skal kunne utføres.
  • Bilder og andre ressurser kan også fortsatt fortsette å lastes inn.
• load hendelse på window utløses når siden og alle ressursene er lastet inn. Vi bruker det sjelden, fordi det vanligvis ikke er behov for å vente så lenge.
• beforeunload hendelsen på window utløses når brukeren vil forlate siden. Hvis vi avbryter hendelsen, spør nettleseren om brukeren virkelig ønsker å forlate (f.eks. Vi har ikke lagrede endringer).
• unload hendelsen på window utløser når brukeren endelig forlater, i behandleren kan vi bare gjøre enkle ting som ikke involverer forsinkelser eller spør en bruker. På grunn av den begrensningen brukes den sjelden. Vi kan sende ut en nettverksforespørsel med navigator.sendBeacon.
• document.readyState er dokumentets nåværende tilstand, endringer kan spores i readystatechange hendelsen:
  • loading – dokumentet lastes inn.
  • interactive – dokumentet blir analysert, skjer omtrent samtidig som DOMContentLoaded, men før det.
  • complete – dokumentet og ressursene er lastet inn, skjer omtrent samtidig som window.onload, men før det.