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.
