JavaScript passo passo

Un esempio di effetto grafico utilizzando l'ogetto Image:

 

Questo esempio è stato facilmente ottenuto sfruttando i metodi setTimeout() e clearTimeout() dell'oggeto window. E' infatti spesso necessario ripetere una certa funzione più volte nello stesso programma, dopo un certo arco di tempo.

var indice=0;
var stemma= new Array(8); // dichiariamo 2 variabili globali: indice e stemma;

for (i=0; i<8; ++i)
{
    stemma[i]=new Image();
    /* carichiamo l'Array stemma con le immagini che ci interessano,
    previa dichiarazione del costruttore new image() */
    stemma[i].src="imm/imm" + i + ".gif";
}

function chiama() // la funzione chiama(), verrà richiamata dal gestore di evento onload del body del documento
{
   if (indice<8)
  {
      document.images[0].src=stemma[indice].src;
      indice=++indice;
   }
  else
  {
     clearTimeout(temp);
  }
  temp=setTimeout("chiama()",700); 
 // la funzione sarà ripetuta 8 volte, tante quante sono le immagini, ogni 700 millisecondi
}

Le immagini saranno caricate tutte prima che abbia inizio lo script.
Essendo già in memoria, la visualizzazione della pagina risulterà ottimizzata.

Per creare un effetto grafico ottimale sarebbero occorsi più fotogrammi, essendo piuttosto visibile lo scarto tra le immagini caricate. Si è però scelto di ridurre al minimo il peso delle immagini, essendo in questa sede importante la spiegazione del codice.

banner2| oggetto image | il DOM