JavaScript onload (Suomi)
Yhteenveto: Tässä opetusohjelmassa opit käsittelemään lataustapahtumaa, joka käynnistää JavaScriptin asiakirjan, kuvan ja komentosarjan elementit.
Ikkunan lataustapahtuma
Objektille window
load
-tapahtuma käynnistyy, kun koko verkkosivu (HTML) on ladattu kokonaan, mukaan lukien kaikki riippuvat resurssit, kuten JavaScript-tiedostot, CSS-tiedostot ja kuvat.
Voit käsitellä load
-tapahtumaa rekisteröimällä tapahtumakuuntelija, joka käyttää addEventListener()
-menetelmää:
Code language: JavaScript (javascript)
Tai käyttämällä onload
window
-objektin ominaisuus:
Code language: JavaScript (javascript)
Jos ylläpidät vanhaa järjestelmää, saatat huomata, että load
-tapahtumakäsittelijä on rekisteröity HTML-dokumentin runko-osaan seuraavasti:
On hyvä käytäntö käyttää addEventListener()
-menetelmä onload
-tapahtumakäsittelijän määrittämiseen aina kun mahdollista.
Kuvan lataustapahtuma
load
-tapahtuma esiintyy myös kuvissa. Voit käsitellä kuvien load
-tapahtumaa käyttämällä kuvan elementtien addEventListener()
-menetelmää.
seuraava esimerkki käyttää load
-tapahtumakäsittelijää selvittääkseen, onko DOM-puussa oleva kuva ladattu kokonaan:
Voit määrittää onload
tapahtumakäsittelijä suoraan käyttämällä onload
-elementti <img>
, kuten tämä:
Code language: HTML, XML (xml)
Jos luot kuvaelementin dynaamisesti, voit määrittää tapahtuman käsittelijän onload
, ennen kuin asetat src
-ominaisuus seuraavasti:
Kuinka se toimii:
- Luo ensin kuvaelementti, kun asiakirja on ladattu kokonaan, sijoittamalla koodi ikkunan lataustapahtuman tapahtumakäsittelijä.
- Toiseksi määritä sitten kuvaan tapahtuman käsittelijä
onload
. - Lisää kolmanneksi kuva
- Määritä lopuksi kuvan URL-osoite
src
-attribuutille. Kuva ladataan elementtiin heti, kun src-ominaisuus on asetettu.
Komentosarjan lataustapahtuma
<script>
-elementti tukee myös load
-tapahtumaa, joka eroaa hieman tavallisista tavoista.
Komentosarjan load
-tapahtuman avulla voit tarkistaaksesi, onko JavaScript-tiedosto ladattu kokonaan.
Toisin kuin kuvissa, verkkoselain alkaa ladata JavaScript-tiedostoja vasta sen jälkeen, kun src
-ominaisuus on määritetty ja <script>
-elementti on lisätty asiakirjaan.
Seuraava koodi lataa app.js
-tiedoston sivun jälkeen. täysin ladattu. Se määrittää onload
-tapahtumakäsittelijän tarkistamaan, onko app.js
ladattu kokonaan.