Il sito per imparare gratuitamente a fare pagine Web

JavaScript S1
















S1 - Preload precaricamento in memoria delle immagini.


Funziona con il Browser:  Firefox firefox   Safari Safari   Opera opera   IE internet explorer   Chr Chrome

Crediti:
Name: Andrea Bianchi
Website: web-link.it

Note: Si tratta di uno script indispensabile per chi usa effetti con le immagini.

Descrizione: Capita di voler fare delle animazioni con sequenza di immagini diverse, anche un semplice rollover altro non è che un'animazione. Spesso però si resta delusi nel vedere che al passaggio del mouse il cambio immagine tarda ad arrivare invalidando l'effetto grafico che avremo voluto offrire al visitatore.

Questo script serve proprio ad evitare, o quanto meno a ridurre al minimo, il tempo d'attesa. Si preoccupa infatti di precaricare nella memoria temporanea del browser tutte quante le immagini interessate; in modo da non avere tempi d'attesa dovuti allo scaricamento dalle stesse dalla rete nel momento esatto in cui serviranno.

Lo script si compone di due parti; una nella parte head e l'altra direttamente nel tag body


Iniziamo dalla prima: lo script

Selezionare tutto il codice cliccando sulla forbice, quindi posizionandovi sul testo evidenziato; fate uso del tasto destro del mouse per l'operazione di copia ed incolla. Non resta che trasferire il tutto nella pagina web, in questo caso fra i tags: <head> e </head>.

seleziona tutto

Adesso la parte in html

Selezionare tutto il codice cliccando sulla forbice, quindi posizionandovi sul testo evidenziato; fate uso del tasto destro del mouse per l'operazione di copia ed incolla. Non resta che sostituire il tag <body>.

seleziona tutto

Attenzione dovrete sostituire i nomi che ho adoperato io con quelli delle vostre immagini (prima, seconda, ecc ecc) non tutte ma soltanto quelle che dovranno essere precaricate in memoria, facendo attenzione che sia specificato anche la loro estensione grafica: gif o jpg che possa essere.

Questo un esempio di rollover, provate a passare col cursore del mouse sopra la scritta preload, dovreste notare uno scambio di immagine immediato, senza tempi d'attesa, ho detto dovreste perchè nonostante questo precaricamento non sempre è possibile ottenere l'effetto voluto, dipende anche dal server sul quale avete il sito. In ogni caso è preferibile evitare immagini di grosse dimensioni, e per dimensioni intendo i Kb che le compongono.

web-link
Questo grazie al precaricamento delle due immagini in memoria, prima ancora di doverle richiamare.




Valutazione

Valutazione: 1.47 stelle su 5
N. Voti: (51)



  Elenco completo degli script.



Se avete domande da fare potete scrivere sul forum di supporto , gratuito e aperto a tutti.