Rollover immagine HTML: l’immagine non è caricata completamente prima del rollover?

Ho un’immagine (in alto a sinistra come collegamento home), e io uso il CSS: passa il mouse per cambiare l’immagine dopo il rollover.

Il problema è che l’immagine impiega tempo per essere caricata la prima volta che la passo. C’è uno spazio vuoto temporaneo e l’immagine viene caricata in modo incrementale. Ci vuole un secondo, ma è fastidioso.

Come posso risolvere questo problema in modo che il rollover sia senza soluzione di continuità? C’è un modo per precaricare l’immagine?

1. Risposta: Usa CSS Sprites

2. Risposta: O creare qualcosa come questo:

  image imagehover  

E il CSS:

img.nohover {

border: 0

}

img.hover {

border: 0;

display: none

}

a: hover img.hover {

display: inline

}

a: hover img.nohover {

display: none

}

Ci sono due opzioni a cui posso pensare, a mani nude:

  1. sprite di immagine CSS, o
  2. posizionando il :hover image in un div nascosto altrove nella pagina.

1, sprite:

Per un CSS Sprite , hai un’immagine di sfondo per il link “home” e cambia semplicemente la sua posizione su :hover :

 #home { background-image: url(http://example.com/spriteOne.png); background-repeat: no-repeat; background-position: 0 100px; } #home:hover { background-position: 0 200px; } 

Ciò richiede tuttavia altezze di set per gli elementi con lo sfondo css-sprite.


2, elementi di precaricamento nascosti:

 #home { background-image: url(http://example.com/bg.png); background-repeat: no-repeat; background-position: 0 100px; } #home:hover { background-image: url(http://example.com/hoverBg.png); } #preload, #preload img { display: none; } 

Un metodo che ho trovato funziona molto bene per i rollover sta usando gli sprite CSS, cioè usando un’immagine che contiene sia la versione originale che quella di rollover dell’immagine. In questo modo entrambe le versioni vengono caricate contemporaneamente e il passaggio da una all’altra è solo una questione di modifica dello stile di background-position dello background-position .

Un modo per farlo è aggiungere un’immagine invisibile alla tua pagina, con lo stesso URL. Quindi aggiungendo quanto segue all’inizio del corpo dei documenti, in realtà chiedi al browser di caricare questa immagine il prima ansible.

  

Sebbene questo tag rimanga parte del tuo documento, non viene mostrato o reso nemmeno a causa delle impostazioni “display: none”. Puoi anche ascoltare il suo evento di caricamento e rimuovere completamente il tag dal DOM una volta che è stato caricato, per mantenere la “spazzatura” fuori dal documento. Quando un’immagine viene caricata in memoria, viene automaticamente riutilizzata ogni volta che si fa riferimento allo stesso URL, quindi una volta impostata la sorgente dell’altra immagine nello stesso URL, verrà caricata dalla memoria.

Spero che aiuti, Kobi

Metti l’immagine in un div con uno stile impostato su { height: 0; overflow: hidden; } { height: 0; overflow: hidden; } { height: 0; overflow: hidden; } , che dovrebbe rendere il browser precaricare l’immagine.