Corso di JavaScript

L’Oggetto Image - Il precaricamento

 

Nella lezione precedente abbiamo visto il metodo per accedere ad un’oggetto immagine con la finalità di sostituirne il contenuto tramite il linguaggio Javascript. Infatti l’immagine caricata con il tag IMG in HTML veniva cambiata al volo tramite l’opzione SRC dell’Oggetto Javascript corrispondente.
 
L’Oggetto Javascript corrispondente può essere definito anche Oggetto ‘riflesso’ dal linguaggio HTML. In pratica l’oggetto immagine o anche ‘Image Object’, viene creato automaticamente, anche se in realtà dallo sviluppatore non è stato scritto alcun codice Javascript.

Questa operazione automatica viene effettuata dalle “Javascript Run Time Engines”, che sono dei ‘motori’ interni al browser che si occupano di costruire in tempo reale tutti gli oggetti Javascript corrispondenti ad ogni TAG HTML presente in un documento step by step.

Per quello che riguarda le immagini, supponiamo di averne a disposizione un certo numero all’interno di in un documento, esse vengono organizzate in un vettore di immagini. Questo significa che se abbiamo cinque immagini verranno automaticamente immagazzinate in memoria nel seguente modo:

 document.images[0] // prima immagine
 document.images[1] // seconda immagine
 document.images[2] // terza immagine
 document.images[3] // quarta immagine
 document.images[4] // quinta immagine


Questa modalità di accesso alle immagini è tanto utile quanto potente, ma dovremo aspettare alcune lezioni prima di poterla verificare insieme. In questa lezione ci occuperemo del ‘precaricamento’ delle immagini, e per utilizzare le immagini useremo la modalità di accesso alle immagini della precedente lezione, nella quale abbiamo anche visto l’importanza della gestione degli Eventi per creare “Effetti Rollover” o animazioni.

Ebbene questo effetto visivo è tecnicamente più valido a vedersi se le immagini che vogliamo sostituire sono già state caricate in precedenza (o precaricate) dal browser.

Di cosa si tratta? Semplicemente di caricare determinate immagini nella cache del browser in modo tale che queste vengano visualizzate istantaneamente al posto delle prime immagini, senza nessuna attesa, la prima volta che viene attivato l’Effetto Rollover.

Il ‘precaricamento’ è una tecnica molto importante e per realizzarlo si utilizza l’Oggetto Image. Fate attenzione al seguente codice:

     miaImmagine = new Image()
     miaImmagine.src = "altraImmagine.jpg"


Queste due righe vanno inserite nell’intestazione della pagina.

La prima riga si occupa di costruire un Oggetto Image di nome miaImmagine, quindi possiamo dire che questa istruzione serve per la prepararazione dello spazio in memoria al fine di contenere una nuova immagine, così come una cornice di un quadro appena realizzata, in futuro conterrà la sua tela.
La seconda riga, invece, si occupa di assegnare l’immagine all’oggetto, e di conseguenza la carica in memoria (è stata scelta la tela da mettere nel quadro).
Se quest’ultima operazione viene effettuata correttamente, a video non dovremmo vedere alcuna scritta o immagine, il risultato ottenuto sarà invece quello di avere a disposizione l’immagine “altraImmagine.jpg” nella cache di memoria prima ancora di visualizzare la pagina web.

Per fare un simpatico esempio, in questa lezione sfrutteremo il logo (titolo.gif) della home page di SoftwarePlanet.


titolo.gif

E’ possibile modificare questa immagine ( di tipo GIF ) con un qualsiasi programma di grafica come Photoshop, Paint Shop Pro o altri simili.
Nel nostro caso ho aumentato (con tecnica RGB) le percentuali di colore sull’immagine in questo modo:

     RED +66%, GREEN +8%, BLUE +100%

Il risultato sarà un logo identico al precedente ma con un colore più intenso, tendente al magenta, ed essendo più luminoso sicuramente valido da applicare come seconda immagine di un ‘Effetto Rollover’.


titolo2.gif

Una volta a disposizione le due immagini vediamo il codice Javascript del precaricamento:

<HEAD>
 <SCRIPT LANGUAGE="JavaScript1.1">
  sp = new Image();
  sp.src = "titolo2.gif";
  window.alert("Precaricamento file avvenuto");
 </SCRIPT>
</HEAD>


<BODY bgcolor="white">
<CENTER>
 <a href="http://www.softwareplanet.net/Edinf/"
  onmouseover="sp.src='titolo2.gif';"
  onmouseout="sp.src='titolo.gif';">
  <img name="sp" src="titolo.gif"
       border="0"
       alt="Se sei un programmatore, clicca qui !">
 </a>
</CENTER>
</BODY>

Nell’intestazione è stato assegnato all’oggetto sp il secondo file “titolo2.gif”, da applicare all’effetto rollover.
Nel corpo, invece, viene effettuato l’effetto rollover tra l’immagine ‘titolo.gif’ che viene caricata con il documento e l’immagine ‘titolo2.gif’ che viene ‘precaricata’ e che è quindi già presente nella cache di memoria locale.
Nell’esempio di questa lezione apparirà un alert in cui verrà dichiarato il precaricamento del file ‘titolo2.gif’ nella cache di memoria.
Per visualizzare l’esempio Clicca Qui!

Nella prossima lezione ci occuperemo sempre degli oggetti Javascript, in particolare questa volta vedremo come accedere alle variabili input di un form.

 

Torna all'indice Generale del corso di Corso di JavaScript di Software Planet