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.
5 Commenti
Elia Contini
Attenzione che AJAX non viene utilizzato in questi thumbnail viewer. Sono semplicemente DHTML.
[il commento lo puoi cancellare ;-)]
Egidio
Infatti. Il mio esempio utilizza i CSS per rendere un effetto estetico simile a quello ottenibile con AJAX.
Il commento lo lascio ;-D … Androide
Nik
Scusa ma io l’effetto dal link di esempio non lo vedo e
il dominio napyfab risulta in vendita !?? :-O
Egidio Murru
Se fai attenzione, poco prima che ricarichi l’immagine si nota la ruotina che gira; magari lo puoi notare se hai connessione lente oppure immagini di grandi dimensioni.
Per quanto riguarda il sito Napufab non ti saprei dire :-/
Nik
Purtroppo o perfortuna ho una connessione superveloce 😉