Precaricamento immagini

Nel momento in cui realizziamo un menù di navigazione composto da sole immagini e con effetti roll-over (immagini che cambiano al passaggio del mouse), il primo problema che salta all’occhio è quello relativo ad un certo ritardo nel visualizzare l’immagine alternativa, che si traduce nella visualizzazione di un riquadro grigio per 1-2 secondi.

Vediamo insieme come ovviare a questo piccolo inconveniente. In questo articolo esamineremo due soluzioni: la prima prevede l’inserimento di un semplice Javascript nella nostra pagina, mentre la seconda sfrutta la proprietà “background-position” del CSS.

Soluzione in Javascript
E’ sufficiente inserire questo script all’interno dei tag “<head></head>” della nostra pagina:

<script type=”text/javascript”>
<!–
var myimages=new Array()
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages(”image1.gif”, “image2.gif” );
//–>
</script>

Come possiamo vedere il codice è molto semplice e non ha bisogno di commenti. L’unica parte da personalizzare è quella contenente l’elenco delle immagini da precaricare, da immettere tra virgolette e separate da una virgola.

Soluzione in CSS
Come anticipato all’inizio dell’articolo, questa soluzione sfrutta la proprietà “background-position” del CSS.
Vediamone la sintassi:

Valore Descrizione
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right		 Specificando una sola parola chiave, la seconda verrà automaticamente impostata su “center”
Valori di default: 0% 0%
x% y% Posizionamento in percentuale: il primo valore è la posizione orizzontale, il secondo quella verticale. Se specifichi un solo valore, l’altro sarà automaticamente impostato al 50%.
xpos ypos Posizionamento in pixel: il primo valore è la posizione orizzontale, il secondo quella verticale. L’unità di misura può essere in pixel (px) o un altro tipo di unità usata nei CSS. Se specifichi un solo valore, l’altro sarà automaticamente impostato al 50%. E’ possibile usare assieme un valore in pixel e uno in percentuale.

In pratica, se normalmente per il pulsante di un menù creiamo due distinte immagini, una per lo stato normale del pulsante e una per l’effetto roll-over, in questo caso dovremo creare una sola immagine che contenga entrambi gli aspetti del pulsante. Di conseguenza l’immagine richiamata nella proprietà “background” sarà la stessa, ma la faremo “slittare” tramite la proprietà “background-position”.
Ad esempio, se abbiamo due bottoni da 80×50 pixel e li fondiamo in un’unica immagine da 80×100px, possiamo usare un codice di questo tipo:

#navigation li a:link, #navigation li a:visited {
width : 80px;
height : 50px;
display : block;
text-align : center;
float: left;
padding-top: 16px;
color: #444;
text-decoration: none;
background: url(images/bg_li.gif) no-repeat top;
margin: 0;
}

#navigation li a:hover {
color: #333;
background: url(images/bg_li.gif) no-repeat bottom;
}

Come si può vedere dal codice, per l’evento :hover abbiamo impostato l’allineamento dello sfondo in basso, in modo da visualizzare la parte inferiore dell’immagine (già caricata). Ovviamente tramite le diverse opzioni della proprietà “background-position” esaminate sopra, è possibile attuare diversi tipo di riposizionamento, con precisione al pixel (sono accettati anche i valori negativi, ad es. -50px).

L’efficacia di questa tecnica è dovuta al fatto che per la maggior parte dei browser in termini di tempo è meno impegnativo lo spostamento dello sfondo rispetto al caricamento di una seconda immagine; non richiedendo nessuno script aggiuntivo è inoltre una tecnica assai efficiente dal punto di vista dell’accessibilità.

Non dimentichiamo che bisogna comunque prestare attenzione alle dimensioni delle immagini; sarà bene fare delle prove per verificare quale sia il migliore rapporto tra qualità e compressione… se usiamo pulsanti da 100kb l’uno non c’è tecnica che tenga!



Altri articoli che potrebbero interessarti