Onload JavaScript
Rezumat: în acest tutorial, veți afla cum să gestionați evenimentul de încărcare care se declanșează pe document, imagine și elemente de script în JavaScript.
Evenimentul de încărcare a ferestrei
Pentru obiectul window
, evenimentul load
este declanșat când întreaga pagină web (HTML) s-a încărcat complet, inclusiv toate resursele dependente, cum ar fi fișiere JavaScript, fișiere CSS și imagini.
Pentru a gestiona evenimentul load
, vă înregistrați un ascultător de evenimente utilizând metoda addEventListener()
:
Code language: JavaScript (javascript)
Sau folosind onload
proprietatea obiectului window
:
Code language: JavaScript (javascript)
Dacă mențineți un sistem moștenit, este posibil să constatați că gestionarul de evenimente load
este înregistrat în elementul corp al documentului HTML, astfel:
Este o practică bună să utilizați addEventListener()
metodă pentru a atribui gestionarul de evenimente onload
ori de câte ori este posibil.
Evenimentul de încărcare a imaginii
load
eveniment apare și pe imagini. Pentru a gestiona evenimentul load
de pe imagini, puteți utiliza metoda addEventListener()
a elementelor imaginii.
următorul exemplu folosește load
handler pentru evenimente pentru a determina dacă o imagine, care există în arborele DOM, a fost complet încărcată:
Puteți atribui un onload
gestionarul de evenimente utilizând direct atributul onload
al elementului <img>
, astfel:
Code language: HTML, XML (xml)
Dacă creați dinamic un element de imagine, puteți atribui un gestionar de evenimente onload
înainte de a seta src
proprietate după cum urmează:
Cum funcționează:
- Mai întâi, creați un element de imagine după ce documentul a fost încărcat complet prin plasarea codului în interiorul handler de eveniment al evenimentului de încărcare a ferestrei.
- În al doilea rând, apoi atribuiți imaginea handler de eveniment
onload
. la document. - În cele din urmă, atribuiți o adresă URL a imaginii atributului
src
. Imaginea va fi descărcată în element imediat ce este setată proprietatea src.
Evenimentul de încărcare a scriptului
<script>
acceptă, de asemenea, evenimentul load
ușor diferit de modurile standard.
Evenimentul load
al scriptului vă permite pentru a verifica dacă un fișier JavaScript a fost complet încărcat.
Spre deosebire de imagini, browserul web începe să descarce fișiere JavaScript numai după ce a fost atribuită proprietatea src
și <script>
elementul a fost adăugat la document.
Următorul cod încarcă fișierul app.js
după ce pagina a fost complet încărcat. Atribuie un onload
gestionar de evenimente pentru a verifica dacă app.js
a fost încărcat complet.