JavaScript-belastning
Sammendrag: i denne opplæringen lærer du hvordan du håndterer lasthendelsen som utløses på dokument-, bilde- og skriptelementene i JavaScript.
Vinduets lasthendelse
For window
-objektet utløses load
-hendelsen når hele websiden (HTML) er lastet inn fullt, inkludert alle avhengige ressurser som JavaScript-filer, CSS-filer og bilder.
For å håndtere load
-hendelsen registrerer du deg. en hendelseslytter som bruker addEventListener()
-metoden:
Code language: JavaScript (javascript)
Eller bruker onload
egenskapen til window
-objektet:
Code language: JavaScript (javascript)
Hvis du vedlikeholder et eldre system, kan du oppdage at load
hendelsesbehandleren er registrert i kroppselementet i HTML-dokumentet, slik:
Det er en god praksis å bruke addEventListener()
metode for å tildele onload
hendelsesbehandler når det er mulig.
Bildets lasthendelse
load
hendelse forekommer også på bilder. For å håndtere load
hendelsen på bildene, kan du bruke addEventListener()
metoden til bildeelementene.
følgende eksempel bruker load
hendelsesbehandler for å avgjøre om et bilde, som finnes i DOM-treet, er fullstendig lastet:
Du kan tilordne et onload
hendelsesbehandler direkte ved hjelp av onload
-attributtet til <img>
-elementet, slik:
Code language: HTML, XML (xml)
Hvis du oppretter et bildeelement dynamisk, kan du tilordne en onload
hendelsesbehandler før du setter src
-egenskap som følger:
Slik fungerer det:
- Opprett først et bildeelement etter at dokumentet er fulladet ved å plassere koden inne i hendelsesbehandler av vinduets lasthendelse.
- For det andre, tildel deretter
onload
hendelsesbehandler til bildet. - For det tredje, legg til bildet til dokumentet.
- Til slutt tildeler du en URL til bildet til attributtet
src
. Bildet blir lastet ned til elementet så snart egenskapen src er satt.
Skriptets lasthendelse
<script>
element støtter også load
hendelsen litt forskjellig fra standard måter.
Skriptets load
hendelse lar deg for å sjekke om en JavaScript-fil er lastet helt inn.
I motsetning til bildene begynner nettleseren å laste ned JavaScript-filer først etter at egenskapen src
er tildelt og <script>
element er lagt til i dokumentet.
Følgende kode laster inn app.js
filen etter at siden er blitt fullstendig lastet. Den tildeler en onload
hendelsesbehandler for å sjekke om app.js
er fulladet.