Kuvien lataaminen asynkronisilla takaisinkutsuilla JavaScriptissä
Toteutetaan funktio loadImage,
joka lataa kuvia. Olkoon ensimmäinen
parametri tälle funktiolle polku kuvaan,
ja toinen - takaisinkutsu, joka suoritetaan, kun
kuva on ladattu:
loadImage('img.png', function() {
// suoritetaan kuvan latautuessa
});
Olkoon ensimmäiseen parametriimme takaisinkutsussamme viite DOM-kuvaelementtiin, ja toiseen - virhe, jos tapahtuu poikkeustilanne:
loadImage('img.png', function(image, err) {
console.log(image, err);
});
Voimme käyttää funktiotamme seuraavalla tavalla:
loadImage('image.png', function(image, err) {
document.body.append(image); // sijoita kuva latauksen yhteydessä
});
Tai poikkeustilanteen käsittelyllä:
loadImage('image.png', function(image, err) {
if (!err) {
document.body.append(image);
} else {
console.log('tapahtui virhe: ' + err);
}
});
Toteuta funktio loadImage. Käytä
tähän aiemmin oppimaasi
koodia kuvien lataamiseen.