Ciclul de viață al paginii domcontentloaded, load, beforeunload, unload, javascript

Ciclul de viață al unei pagini HTML constă în trei evenimente importante:

Fiecare eveniment poate fi folosit în diferite scopuri:
  • Evenimentul DOMContentLoaded este pregătit pentru DOM, astfel încât managerul poate căuta noduri DOM. inițializați interfața.
  • Încărcarea evenimentului - sunt încărcate resurse suplimentare și puteți obține dimensiuni de imagine (dacă nu este specificat în HTML / CSS) etc.
  • Înainte de a încărca / descărca evenimentul, utilizatorul părăsește pagina. Puteți să verificați dacă utilizatorul a salvat modificările și să-l întrebi dacă vrea cu adevărat să plece.

Să luăm în considerare aceste evenimente în detaliu.







DOMContentLoaded

Evenimentul DOMContentLoaded apare în obiectul documentului. Trebuie să utilizați addEventListener. pentru a urmări:

La prima vedere, evenimentul DOMContentLoaded este simplu. Dar există câteva caracteristici.

DOMContentLoaded și scripturi

Când browserul încarcă codul HTML și întâlnește



Umplere automată cu browsere

Firefox. Chrome și Opera completează automat câmpurile de formular pentru DOMContentLoaded. De exemplu, dacă o pagină are un formular cu câmpuri pentru introducerea numelui de utilizator și parola, iar browser-ul să-și amintească valorile lor, DOMContentLoaded poate încerca să le umple în mod automat (în cazul în care este aprobat de către utilizator).

Prin urmare, în plus față de întârzierea înainte de încărcarea completă și execuția script-urilor, DOMContentLoaded poate fi de asemenea întârziată datorită umplerii automate a câmpurilor de formular. Ați putea fi confruntat cu acest lucru pe unele site-uri: câmpurile de conectare / câmpurile de parolă nu sunt actualizate automat și există o întârziere înainte ca pagina să fie complet încărcată. De fapt, aceasta este întârzierea evenimentului DOMContentLoaded.

Unul dintre avantajele minore ale utilizării asin și amâna atributele pentru script-uri externe este faptul că acestea nu blochează DOMContentLoaded și pentru a evita întârzierea asociată cu completarea automată a formularelor.

window.onload

În exemplul de mai jos, dimensiunile imaginilor sunt afișate corect, deoarece window.onload se așteaptă să încarce toate imaginile:

window.onunload

Când un vizitator părăsește pagina, este lansat un eveniment de descărcare pentru obiectul ferestrei. Puteți efectua anumite acțiuni care nu sunt legate de întârziere. De exemplu, închideți ferestrele pop-up. Dar nu puteți anula trecerea la o altă pagină. Pentru a face acest lucru, trebuie să utilizați un alt eveniment - de acum înainte.

window.onbeforeunload

În cazul în care vizitatorul părăsește pagina sau încearcă să închidă fereastra, operatorul de încărcare înainte poate solicita o confirmare suplimentară. Acest handler returnează un șir cu o întrebare. Browserul îl va afișa.

readyState

Ce se întâmplă dacă instalez ordonatorul DOMContentLoaded după încărcarea unui document? Desigur, nu va începe niciodată.

Există momente când nu este clar dacă documentul este gata. De exemplu, un script extern cu atributul asincron este încărcat și pornit asincron. În funcție de rețea, acesta poate fi încărcat și executat înainte ca descărcarea documentului să se finalizeze sau după aceea. Prin urmare, trebuie să cunoașteți starea actuală a documentului.

Proprietatea document.readyState furnizează aceste informații. Există trei valori posibile:
  • "încărcare" - documentul este încărcat;
  • "interactiv" - documentul este citit pe deplin;
  • "completă" - documentul este citit pe deplin și toate resursele (de exemplu, imaginile) sunt încărcate.

Deci, puteți verifica valoarea document.readyState și configurați manualul sau executați codul imediat ce este gata.

De exemplu, după cum urmează:

Evenimentul readystatechange începe când se schimbă starea. Puteți afișa toate aceste stări după cum urmează:

Evenimentul readystatechange este o metodă alternativă pentru urmărirea stării de încărcare a unui document, fiind introdus cu mult timp în urmă. În prezent, este rar utilizată, dar o consideră completă.

Versiunea demo poate fi găsită pe nisip.

Secvența standard a evenimentelor:

Cifrele din parantezele pătrate indică timpul aproximativ când apare acest lucru. Timpul real este puțin mai lung, dar evenimentele cu aceeași cifră sunt declanșate aproximativ în același timp (± câteva milisecunde).

Document.readyState acceptă starea interactivă imediat înainte de DOMContentLoaded. Aceste două evenimente înseamnă de fapt același lucru.

Document.readyState este terminat când toate resursele sunt încărcate (iframe și img). Vedem că acest lucru se întâmplă în același timp cu img.onload (img - ultima resursă) și window.onload. Trecerea la starea completă înseamnă același lucru ca și window.onload. Diferența constă în faptul că window.onload pornește întotdeauna după toate celelalte operațiuni de încărcare a încărcăturii.

concluzie

Ciclul de viață al paginii:

Traducerea articolului "Lifecycle de pagină DOMContentLoaded, load, beforeunload, unload" de echipa prietenoasă a proiectului Saitostroenie de la A la Z.







Trimiteți-le prietenilor: