Gestire le immagini: l'oggetto Image

All'interno di una pagina HTML JavaScript è in grado di manipolare immagini a diversi livelli di complessità. Le recenti tecnologie legate agli sviluppi di HTML5, infatti, consentono non solo di gestire immagini già pronte, ma di generare e modificare grafica dinamicamente. Vediamo in concreto quali sono le possibilità a nostra disposizione.

L'elemento <img>

L'approccio più elementare per gestire un'immagine consiste nella manipolazione dell'elemento <img> dell'HTML. Esso rappresenta un'immagine statica sulla pagina e generalmente non ha bisogno di elaborazione da parte di JavaScript:

<img src="immagine.jpg" />

Come per qualsiasi elemento HTML, possiamo comunque creare immagini dinamicamente ed aggiungerle al DOM, come possiamo vedere dal seguente esempio:

var btnAddImage = document.getElementById("btnAddImage");
btnAddImage.onclick = function() {
  var img = document.createElement("img");
  img.src = "immagine.jpg";
  document.body.appendChild(img);
};

Gestendo tramite JavaScript l'elemento <img> possiamo realizzare semplici funzionalità come ad esempio la navigazione tra un elenco di immagini, come mostrato dal seguente codice:

var images = ["img1.jpg", "img2.jpg", "img3.jpg"];
var img = document.getElementById("img");
var btnNextImg = document.getElementById("btnNextImage");
var currentImageIndex = 0;
btnNextImg.onclick = function () {
  currentImageIndex = (currentImageIndex + 1) % images.length;
  img.src = images[currentImageIndex];
};

Nell'esempio abbiamo memorizzato in un array l'elenco dei nomi dei file di immagine da visualizzare e abbiamo assegnato all'evento click del pulsante btnNextImage l'esecuzione della funzione che modifica il valore dell'attributo src dell'elemento <img>.

Grazie all'uso del modulo (operatore %), dopo l'ultimo elemento dell'array torneremo a visualizzare il primo elemento. Possiamo rendere automatico il passaggio da un'immagine all'altra eseguendo la funzione ad intervalli regolari tramite setInterval():

setInterval(function () {
  currentImageIndex = (currentImageIndex + 1) % images.length;
  img.src = images[currentImageIndex];
}, 10000);

L'oggetto Image

È possibile creare un elemento immagine da aggiungere al DOM utilizzando il costruttore Image():

var btnAddImage = document.getElementById("btnAddImage");
btnAddImage.onclick = function() {
  var img = new Image();
  img.src = "immagine.jpg";
  document.body.appendChild(img);
};

Questo approccio è del tutto analogo alla creazione di un elemento <img>, ma risulta comodo per il precaricamento di immagini.

Il precaricamento delle immagini

Per chiarire questo concetto, prendiamo in esame la navigazione tra immagini che abbiamo realizzato nell'esempio precedente. Il caricamento di ogni immagine avviene nel momento in cui i assegniamo il nome del file all'attributo src. Ciò può comportare un'attesa da parte dell'utente, specie se le dimensioni dell'immagine sono non trascurabili. Possiamo allora precaricare nella cache del browser le immagini sfruttando il costruttore Image(), come mostrato di seguito:

var images = [];
var img1 = new Image();
img1.src = "img1.jpg";
images.push(img1);
var img2 = new Image();
img2.src = "img2.jpg";
images.push(img2);
var img3 = new Image();
img3.src = "img3.jpg";
images.push(img3);
var img = document.getElementById("img");
var btnNextImg = document.getElementById("btnNextImage");
var currentImageIndex = 0;
btnNextImg.onclick = function () {
  currentImageIndex = (currentImageIndex + 1) % images.length;
  img.src = images[currentImageIndex].src;
};

La creazione di un oggetto Image fa sì che l'immagine corrispondente venga caricata nella cache del browser senza essere visualizzata sulla pagina. Da notare come all'attributo src del'elemento <img> venga ora associato il valore dell'attributo src dell'elemento dell'array, poiché ora il contenuto dell'array non è più costituito dai semplici nomi di file.