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.

Sammendrag