Attualmente mi stò interessando molto all’uso di AJAX (Asynchronous JavaScript and XML) una tecnica per sviluppare applicazioni web interattive e dinamiche.

Uno degli interessanti effetti grafici di AJAX riguarda il sistema di caricamento delle immagini e contenuti tramite il browser; uno splendido esempio si può visionare sul sito LightBox 2 al momento di caricare l’immagine.

Quello che mi piace di più è l’effetto “caricamento” che si genera al momento di richiamare un contenuto. Perciò ci si può chiedere se ottenere un risultato identico senza però l’ausilio della tecnologia AJAX; ebbene il tutto si può effettuare tramite l’ausilio dei CSS, che da questo punto di vista confermano la loro elasticità e versatilità.

Ecco qui un esempio dell’effetto.

In linea di principio è tutto basato su un trucco che impiega una gif animata che simula l’effetto di caricamento; quest’ultima è impostata come background dell’immagine da caricare e, successivamente alla comparsa dell’immagine richiesta, viene nascosta dalla stessa.

Un consiglio che posso dare a coloro i quali vogliano adoperare tale tecnica per un eventuale galleria d’immagini è quello di utilizzare il sistema se si è di fronte a immagini di grosse dimensioni; infatti se l’immagine dovesse risultare “leggera” non si potrebbe notare l’effetto richiesto.

[code lang=”css”]
img.photo {
border: 1px solid #000;
background: url("upload.gif") no-repeat center center;
}
[/code]

La classe che abbiamo creato verrà richiamata nel codice HTML e permetterà il nostro effetto.

[code lang=”html”]<img src="i.jpg" class="photo" alt="New York" />[/code]

Potete trovare tutta una serie di gif animate che richiamano vari effetti a questo indirizzo dell’amico Napyfab.

Si può sempre decidere di ottimizzare le immagini da caricare tramite un classico del web design e cioè l’effetto ombra, che potete trovare qui CSS Drop Shadow inoltre Onion Skin e il migliore, a parer mio, CSS Drop Shadow II.