Viikkotehtävä 4:ssa on kaksi eri tapaa varmistaa, että käyttämänne kuvat ja niiden ominaisuudet ovat javascript-koodissanne käytettävissä.
a) Joko laitatte kaikki kuvat suoraan html-koodiin ja teette kaiken koodinne window-luokan load-tapahtumassa, joka tapahtuu vasta, kun kaikki sivuun liittyvät asiat on ladattu
b) jos luotte img-elementtejä dynaamisesti javascript-koodissa, teidän _täytyy_ odottaa, että kuva ehtii latautua. Esim. kuvan korkeutta ja leveyttä ei tiedetä ennen kuin kuva on latautunut Tässä tapauksessa kuvalle pitää suoraan asettaa load-tapahtumakäsittelijä:
let img = document.createElement("img"); img.addEventListener("load", function(e) { tänne kuvaa käsittelevä koodi });
img.src = "kuvan osoite";
load-tapahtumankäsittelijä on hyvä asettaa heti, kun img-elementti on luotu, että ei käy mitään vahinkoja eli kuva esim. olisi lokaalisti testaillessa tai välimuistista jo ehtinytkin latautua ennen kuin tapahtumankäsittelijää edes asetetaan.
Muistakaa asettaa tapahtumankäsittelijät aina addEventListener-metodilla eikä suoraan sijoittamalla esim. img.onload-ominaisuuteen. Jälkimmäistä tapaa näkee monissa esimerkeissä, mutta addEventListener on aina parempi.