Caricare due o più immagini
Questo articolo è parte della collana Realizzare Giochi in HTML5
Altri articoli in questa collana:
Con una piccola modifica al precedente esempio vediamo come è possibile caricare più di una immagine.
Utilizzeremo un Array, in informatica un Array è un insieme organizzato di elementi omogenei, i nostri elementi omogenei saranno URL di immagini, il nostro Array sarà il seguente:
var images = [ 'https://www.danielealessandra.com/wp-content/uploads/2015/09/pig.jpg', 'https://www.danielealessandra.com/wp-content/uploads/2016/11/dog.jpg', 'https://www.danielealessandra.com/wp-content/uploads/2016/11/bird.jpg', 'https://www.danielealessandra.com/wp-content/uploads/2016/11/owl.jpg', 'https://www.danielealessandra.com/wp-content/uploads/2016/11/squirrell.jpg' ];
Possiamo eseguire la stessa funzione su tutti gli elementi di un Array utilizzando il metodo forEach dell’Array, in questo modo non dovremo ripetere le stesse righe per ognuna delle immagini.
images.forEach(function(url) {
var image = new Image();
image.src = url + '?_=' + Math.random();
/// Aggungo un listener per eseguire una funzione appena l’immagine è stata caricata
image.addEventListener('load', drawLoadedImageInCanvas);
});
La parte colorata in blu non serve realmente, l’ho aggiunta per forzare un nuovo caricamento ogni volta, altrimenti ci ritroveremo le immagini nella cache del browser e non avrebbe senso parlare di Preload.
0
Continua a leggere questa collana:
Realizzare Giochi in HTML5 Ep. V: Introduzione a CreateJS