Pagina: DOMContentLoaded, load, beforeunload, unload (Română)

Ciclul de viață al unei pagini HTML are trei evenimente importante:

• DOMContentLoaded – browserul a încărcat complet HTML și arborele DOM este construit, dar este posibil ca resursele externe, cum ar fi imaginile <img> și foile de stil, să nu fi fost încă încărcate.
• load – nu numai HTML este încărcat, ci și toate resursele externe: imagini, stiluri etc.
• beforeunload/unload – utilizatorul părăsește pagina.

Fiecare eveniment poate fi util:

• DOMContentLoaded eveniment – DOM este gata , astfel încât gestionarul să poată căuta noduri DOM, să inițializeze interfața.
• load eveniment – resursele externe sunt încărcate, deci sunt aplicate stiluri, dimensiunile imaginilor sunt cunoscute etc.
• beforeunload eveniment – utilizatorul pleacă: putem verifica dacă utilizatorul a salvat modificările și îi putem întreba dacă doresc cu adevărat să plece.
• – utilizatorul aproape a plecat, dar totuși putem iniția unele operațiuni, cum ar fi trimiterea de statistici.

Să explorăm detaliile acestor evenimente.

DOMContentLoaded

Evenimentul DOMContentLoaded se petrece pe obiectul document.

Noi trebuie să utilizați addEventListener pentru a-l prinde:

De exemplu:

În exemplu, gestionarul DOMContentLoaded rulează atunci când documentul este încărcat, astfel încât să poată vedea toate elementele, inclusiv <img> de mai jos.

Dar nu așteaptă încărcarea imaginii. Deci, alert arată dimensiuni zero.

La prima vedere, evenimentul DOMContentLoaded este foarte simplu. Arborele DOM este gata – iată evenimentul. Există însă câteva particularități.

DOMContentLoaded și scripturi

Când browserul procesează un document HTML și întâlnește o etichetă <script>, trebuie să execute înainte de a continua construirea DOM. Aceasta este o măsură de precauție, deoarece scripturile ar putea dori să modifice DOM și chiar document.write în el, așa că DOMContentLoaded trebuie să aștepte.

Deci, DOMContentLoaded se întâmplă cu siguranță după astfel de scripturi:

În exemplul de mai sus, vedem mai întâi „Biblioteca încărcată …”, apoi „Gata DOM!” (toate scripturile sunt executate).

DOMContentLoaded și stiluri

Foile de stil externe nu afectează DOM, așa că DOMContentLoaded nu le așteaptă.

Dar există o capcană. Dacă avem un script după stil, atunci acel script trebuie să aștepte până când se încarcă foaia de stil:

Motivul pentru aceasta este că scriptul poate dori să obțină coordonate și alte proprietăți ale elementelor dependente de stil, ca în exemplul de mai sus. Bineînțeles, trebuie să aștepte încărcarea stilurilor.

Deoarece DOMContentLoaded așteaptă scripturile, acum așteaptă și stilurile dinaintea lor.

Completare automată a browserului încorporat

Formulare de completare automată Firefox, Chrome și Opera pe DOMContentLoaded.

De exemplu, dacă pagina are un formular cu autentificare și parolă, iar browserul și-a amintit valorile, apoi pe DOMContentLoaded poate încerca să le completeze automat (dacă este aprobat de utilizator).

Deci, dacă DOMContentLoaded este amânat de scripturi cu încărcare îndelungată, apoi se așteaptă și completarea automată. Probabil ați văzut că pe unele site-uri (dacă utilizați completarea automată a browserului) – câmpurile de autentificare / parolă nu sunt completate automat imediat, dar există o întârziere până când pagina se încarcă complet. Aceasta este de fapt întârzierea până la evenimentul DOMContentLoaded.

window.onload

load evenimentul de pe obiectul window se declanșează atunci când este încărcată întreaga pagină, inclusiv stiluri, imagini și alte resurse. Acest eveniment este disponibil prin intermediul proprietății onload.

Exemplul de mai jos arată corect dimensiunile imaginii, deoarece window.onload așteaptă toate imaginile:

window.onunload

Când un vizitator părăsește pagina, evenimentul unload se declanșează pe window. Acolo putem face ceva care să nu implice o întârziere, cum ar fi închiderea ferestrelor pop-up aferente.

Excepția notabilă este trimiterea de date analitice.

Să presupunem că adunăm date despre modul în care este pagina folosit: clicuri de mouse, derulare, zone de pagină vizualizate și așa mai departe.

Desigur, evenimentul unload este atunci când utilizatorul ne părăsește și am dori să salvați datele pe serverul nostru.

Trimite datele în fundal.Trecerea la o altă pagină nu este întârziată: browserul părăsește pagina, dar totuși efectuează sendBeacon.

Iată cum să o utilizați:

• Solicitarea este trimisă ca POST.
• Putem trimite nu numai un șir, ci și formulare și alte formate, așa cum este descris în capitolul Preluare, dar de obicei este un obiect înșirat.
• Datele sunt limitate cu 64 KB.

Când se termină solicitarea sendBeacon, probabil că browserul a părăsit deja documentul, deci nu există nicio modalitate de a obține răspunsul serverului (care este de obicei gol pentru analize).

Există, de asemenea, un semnalizator keepalive pentru a face astfel de solicitări „după pagină-stânga” în metoda de preluare pentru solicitări de rețea generice. Puteți găsi mai multe informații în capitolul Preluare API.

Dacă dorim să anulăm tranziția la o altă pagină, nu o putem face aici. Dar putem folosi o altă eveniment – onbeforeunload.

window.onbeforeunload

Dacă un vizitator a inițiat navigarea aw din pagină sau încearcă să închidă fereastra, gestionarul beforeunload cere confirmări suplimentare.

Dacă anulăm evenimentul, browserul poate întreba vizitatorul dacă sunt siguri.

Puteți încerca rularea acestui cod și apoi reîncărcarea paginii:

Din motive istorice, returnarea unui șir ne-gol este, de asemenea, considerat ca fiind anulat Evenimentul. Cu ceva timp în urmă, browserele obișnuiau să-l afișeze ca mesaj, dar așa cum spune specificațiile moderne, nu ar trebui.

Iată un exemplu:

Comportamentul a fost schimbat , deoarece unii webmasteri au abuzat de acest gestionar de evenimente afișând mesaje înșelătoare și enervante. Deci, în acest moment, browserele vechi încă îl pot afișa ca mesaj, dar în afară de asta – nu există nicio modalitate de a personaliza mesajul afișat utilizatorului.

readyState

Ce se întâmplă dacă setăm handlerul DOMContentLoaded după încărcarea documentului?

Firește, acesta nu rulează niciodată.

Există cazuri în care nu suntem siguri dacă documentul este gata sau nu. Am dori ca funcția noastră să se execute atunci când DOM-ul este încărcat, fie el acum sau mai târziu.

Proprietatea document.readyState ne spune despre starea curentă de încărcare.

Există 3 valori posibile:

• "loading" – documentul se încarcă.
• "interactive" – documentul a fost citit complet.
• "complete" – documentul a fost citit complet și toate resursele (cum ar fi imaginile) sunt încărcate

Deci, putem verifica document.readyState și putem configura un handler sau executăm codul imediat dacă este gata.

Există de asemenea, evenimentul readystatechange care se declanșează atunci când starea se modifică, astfel încât să putem imprima toate aceste stări astfel:

readystatechange event este o mecanică alternativă de urmărire a stării de încărcare a documentului, a apărut cu mult timp în urmă. În zilele noastre, este rar folosit.

Să vedem fluxul complet al evenimentelor pentru completare.

Iată un document cu <iframe>, <img> și gestionarii care înregistrează evenimente:

Exemplul de lucru se află în sandbox.

Ieșirea tipică:

numerele între paranteze pătrate indică timpul aproximativ când se întâmplă. Evenimentele etichetate cu aceeași cifră se întâmplă aproximativ în același timp (± câteva ms).

• document.readyState devine interactive chiar înainte de DOMContentLoaded. Aceste două lucruri înseamnă de fapt același lucru.
• document.readyState devine complete când toate resursele (iframe și img) sunt încărcate. Aici putem vedea că se întâmplă în aproximativ același timp cu img.onload (img este ultima resursă) și window.onload. Trecerea la starea complete înseamnă același lucru ca window.onload. Diferența este că window.onload funcționează întotdeauna după toate celelalte manipulatoare load.

Rezumat

Evenimente de încărcare a paginii:

• Evenimentul DOMContentLoaded se declanșează pe document când DOM este gata. Putem aplica JavaScript elementelor în această etapă.
  • Script, cum ar fi <script>https://javascript.info/...</script> sau <script src="https://javascript.info/..."></script> bloc DOMContentLoaded, browserul așteaptă pentru ca aceștia să fie executați.
  • Imaginile și alte resurse pot continua să se încarce.
• load evenimentul de pe window se declanșează atunci când pagina și toate resursele sunt încărcate. Rareori îl folosim, deoarece de obicei nu este nevoie să așteptăm atât de mult.
• Evenimentul beforeunload de pe window se declanșează atunci când utilizatorul dorește să părăsească pagina. Dacă anulăm evenimentul, browserul întreabă dacă utilizatorul dorește cu adevărat să plece (de exemplu, avem modificări nesalvate).
• Evenimentul unload de pe window se declanșează atunci când utilizatorul pleacă în cele din urmă, în handler putem face doar lucruri simple care nu implică întârzieri sau cererea unui utilizator. Datorită acestei limitări, este rar folosită. Putem trimite o cerere de rețea cu navigator.sendBeacon.
• document.readyState este starea curentă a documentului, modificările pot fi fi urmărit în evenimentul readystatechange:
  • loading – documentul se încarcă.
  • interactive – documentul este analizat, se întâmplă aproximativ în același timp cu DOMContentLoaded, dar înaintea acestuia.
  • complete – documentul și resursele sunt încărcate, se întâmplă aproximativ în același timp cu window.onload, dar înainte de acesta.