JavaScript onload

Oversigt: I denne vejledning lærer du, hvordan du håndterer indlæsningshændelsen, der affyrer dokument-, billed- og scriptelementerne i JavaScript.

Vinduets indlæsningshændelse

For window -objektet udløses begivenheden load, når hele websiden (HTML) er indlæst fuldt, inklusive alle afhængige ressourcer såsom JavaScript-filer, CSS-filer og billeder.

For at håndtere begivenheden load registrerer du en begivenhedslytter ved hjælp af addEventListener() -metoden:

Code language: JavaScript (javascript)

Eller ved hjælp af onload egenskab for window -objektet:

Code language: JavaScript (javascript)

Hvis du opretholder et ældre system, kan du finde ud af, at load begivenhedshåndtereren er registreret i body-elementet i HTML-dokumentet, sådan her:

Det er en god praksis at bruge addEventListener() metode til at tildele onload begivenhedshåndterer, når det er muligt.

Billedets belastningshændelse

load begivenhed forekommer også på billeder. For at håndtere load begivenheden på billederne kan du bruge addEventListener() metoden til billedelementerne.

følgende eksempel bruger load begivenhedshåndterer til at afgøre, om et billede, der findes i DOM-træet, er fuldstændigt indlæst:

Du kan tildele et onload begivenhedshåndterer direkte ved hjælp af onload attributten for <img> -elementet som dette:

Code language: HTML, XML (xml)

Hvis du opretter et billedelement dynamisk, kan du tildele en onload begivenhedshåndterer, inden du indstiller src egenskab som følger:

Sådan fungerer det:

  • Opret først et billedelement, når dokumentet er fuldt indlæst ved at placere koden inde i begivenhedshåndtering af vinduets indlæsningshændelse.
  • For det andet skal du tildele onload begivenhedshåndterer til billedet.
  • For det tredje tilføj billedet til dokumentet.
  • Endelig tildel en billed-URL til attributten src. Billedet downloades til elementet, så snart src-egenskaben er indstillet.

Scriptets indlæsningshændelse

<script> element understøtter også load begivenheden lidt forskellig fra standard måder.

Scriptets load begivenhed giver dig mulighed for for at kontrollere, om en JavaScript-fil er fuldstændigt indlæst.

I modsætning til billederne begynder webbrowseren kun at downloade JavaScript-filer, efter at egenskaben src er tildelt, og <script> element er blevet føjet til dokumentet.

Den følgende kode indlæser app.js filen, efter at siden er blevet fuldt lastet. Det tildeler en onload begivenhedshåndterer for at kontrollere, om app.js er fuldt indlæst.

Oversigt

Skriv et svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *