Problema rollover css

[lorenzos]

Dopo una lunga assenza dovuta a lavoro all'estero (e senza computer) torno e prima di cominciare saluto tutti.

Ora vi pongo il problema.

Per il sito che sto facendo ho utilizzato dei rollover fatti con i css. Ora, durante il caricamento questi funzionano male, per parecchi secondo. Poi sembrano stabilizzarsi.

Sapete aiutarmi?

[afurly]

Dei rollover di che tipo ??
Con delle immagini ?

Dovresti essere piu' chiaro....

Ciao ciao

[afurly]

Ho cliccato sul link e mi sono risposto da solo alla mia domanda scusami...

Il fatto e' che la prima volta che vai sul link l'immagine non e' ancora stata caricata, quindi ci mettew un po' a visualizzarla, le violte seguenti l'immagine e' gia' scaricata quindi la visualizza subito.

Potresti risolvere mettendo al fondo della pagina un div nascosto che carica l'immagine, cosi' che sia gia' scaricata al momento del primo rollover.

Ciao ciao

[lorenzos]

Potresti risolvere mettendo al fondo della pagina un div nascosto che carica l'immagine, cosi' che sia gia' scaricata al momento del primo rollover

Scusa, in che senso? :master:

[afurly]

Mi spiego meglio, per fare in modo che quando passi con il mouse sul link carichi subito l'immagine, quest'ultima deve essere gia' scaricata, se no prima di visualizzarla ci mette il tempo di prenderla dal server.

Se tu carichi l'immagine nella pagina, senza aspettare che sia necessaria per il rollover, hai risolto il tuo problema.

Mettere l'immagine in un posto a caso nella pagina non va bene, quindi se tu la carichi da qualche parte che non si vede hai risolto il problema in maniera ulteriore.

La soluzione che suggerisco io e di mettere un div nascosto... che carica l'iimagine ma non si vede.... cosi':

<div style="visibility:hidden">[img]tua_immagine[/img]</div>

Il posto piu' comodo potrebbe essere alla fine della pagina prima della chiusura del body.

Sono stato prolisso ma spero chiaro ed efficace.

Ciao ciao

[lorenzos]

Ok, ma il mio rollover non è fatto con javascript, in ogni caso ora provo, grazie.

[afurly]

Con cosa sia fatto il rollover non importa, l'importante e' che quando serve l'immagine questa ci sia gia'.....

Il concetto e' semplice

[pierofix]

Allora, il problema credo sia appunto dovuto al tempo di caricamento dell'immagine.

Tuttavia sconsiglierei vivamente l'utilizzo di div nascosti con all'interno le immagini per il preload: è una sporcatura inutile di markup e di contenuto (uno screen-reader potrebbe comunque leggere le immagini a fondo pagina ma un utente non sarebbe in grado di capire a cosa si riferiscono).

Direi, pertanto, di lasciare le cose come stanno. Tutt'al più ottimizzerei meglio le immagini stesse utilizzate per il rollover.

[afurly]

Originariamente inviato da pierofix
Tuttavia sconsiglierei vivamente l'utilizzo di div nascosti con all'interno le immagini per il preload: è una sporcatura inutile di markup e di contenuto (uno screen-reader potrebbe comunque leggere le immagini a fondo pagina ma un utente non sarebbe in grado di capire a cosa si riferiscono).

Puoi spiegare meglio quale sarebbe il problema ? Non ho capito bene e la cosa interessa anche a me.... io uso questo trucchetto in alcune pagine e mi sembra funzionare tutto correttamente.

[pierofix]

Che funzioni visivamente non ci piove (anche se alcuni nuovi dispositivi di accesso al web potrebbero avere limitazioni tali da creare problemi).

Il problema principale sta nel fatto che vengono inquinati sia la struttura del markup che il contenuto del documento: si hanno infatti elementi con alcuno scopo semantico ma utilizzati solamente ai fini di un miglior caricamento di pagina.

Ora, tutto ciò è inutile in quanto basta ottimizzare bene le immagini utilizzate: i tempi di caricamento non saranno così appesantiti e l'utente vedrà comporsi la pagina normalmente (grazie anche ai nuovi tipi di connessione).

Se tutte queste preoccupazioni possono sembrare eccessive o equiparate a "pippe mentali", il problema si complica in termini di accessibilità: il div a fondo pagina sarà sì escluso alla vista, ma le tecnologie assistive (come gli screen-reader, una tipologia di browser per non vedenti) lo vedranno e lo leggeranno lo stesso. Ora, già la consultazione è difficile per le persone con disabilità, figuriamo se inseriamo anche elementi inutili che aumentano il rumore.

In fondo, ripeto, i preload sono inutili e dannosi in questo caso in quanto esistono soluzioni alternative più semplici ed intelligenti come, appunto, una migliore ottimizzazione delle immagini.