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.

Rezumat