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.

Yhteenveto

Vastaa

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *