JavaScript-inladdning

Sammanfattning: i den här självstudien lär du dig hur du hanterar laddningshändelsen som avfyrar dokument-, bild- och skriptelementen i JavaScript.

Fönstrets laddningshändelse

För window -objektet utlöses load -händelsen när hela webbsidan (HTML) har laddats helt, inklusive alla beroende resurser som JavaScript-filer, CSS-filer och bilder.

För att hantera load -händelsen registrerar du en händelselyssnare som använder addEventListener() -metoden:

Code language: JavaScript (javascript)

Eller använder onload egenskap för window -objektet:

Code language: JavaScript (javascript)

Om du har ett äldre system kan du upptäcka att load händelsehanteraren är registrerad i HTML-dokumentets huvudelement, så här:

Det är en bra metod att använda addEventListener() metod för att tilldela onload händelsehanteraren när det är möjligt.

Bildens laddningshändelse

load händelse inträffar också på bilder. För att hantera load händelsen på bilderna kan du använda addEventListener() metoden för bildelementen.

följande exempel använder händelseshanteraren load för att avgöra om en bild, som finns i DOM-trädet, har laddats helt:

Du kan tilldela en onload händelsehanterare direkt med onload -attributet för <img> -elementet, så här:

Code language: HTML, XML (xml)

Om du skapar ett bildelement dynamiskt kan du tilldela en onload händelsehanterare innan du ställer in src egenskap enligt följande:

Så fungerar det:

  • Skapa först ett bildelement efter att dokumentet har laddats helt genom att placera koden inuti händelsehanterare för fönstrets laddningshändelse.
  • För det andra, tilldela sedan onload händelsehanteraren till bilden.
  • För det tredje, lägg till bilden till dokumentet.
  • Tilldela slutligen en bild-URL till attributet src. Bilden laddas ned till elementet så snart egenskapen src har ställts in.

Skriptets laddningshändelse

<script> -elementet stöder också load -händelsen som skiljer sig något från standardvägarna.

Skriptets load -händelse låter dig för att kontrollera om en JavaScript-fil har laddats helt.

Till skillnad från bilderna börjar webbläsaren att ladda ner JavaScript-filer först efter att egenskapen src har tilldelats och <script> -elementet har lagts till i dokumentet.

Följande kod laddar app.js -filen efter att sidan har varit helt laddad. Det tilldelar en onload händelsehanterare för att kontrollera om app.js har laddats helt.

Sammanfattning

Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *