precaricare le immagini con immagini di sfondo css?

Question

c'è il modo semplice noto di precaricare le immagini con un div in posizione fissa al di fuori del viewport che contiene alcune immagini.

È in realtà lo stesso utilizzare semplicemente la proprietà background in css e applicare più immagini a un div senza contenuto?

piace così?

<div id="preload"></div> 

#preload { 
    position: absolute; 
    overflow: hidden; 
    left: -9999px; 
    top: -9999px; 
    height: 1px; 
    width: 1px; 
    background: transparent url("../images/misc/formLoader.gif") no-repeat center center; 
    background: transparent url("../images/misc/selectLoader.gif") no-repeat center center; 
    background: transparent url("../images/misc/projectLoader.gif") no-repeat center center; 
} 

Questo funzionerebbe davvero? Oppure l'ultima proprietà di background sovrascrive le altre dichiarazioni?

È possibile con sfondi multipli CSS3?

Answer 1

Quando la virgola separa le immagini di sfondo in questo modo: background-image: url(../images/misc/formLoader.gif), url(../images/misc/selectLoader.gif), url(../images/misc/projectLoader.gif); Dovrebbe funzionare. Non lo so, se funziona con `background: '. Provalo.

Answer 2

È possibile inserire più sfondi su un elemento con css3. http://www.css3.info/preview/multiple-backgrounds/

---

Se si vuole farlo funzionare in IE come pure .. che vuoi fare nel modo <img>.

---

anche un buon modo è quello di mettere più immagini in unico documento immagine e applicare tale come immagine di sfondo per separare gli elementi e utilizzare background-position: -20px 0px; per definire la posizione in cui si trova che un'immagine specifica. Questo fa sì che tutte queste immagini in questo documento vengano caricate nello stesso momento in cui si trovano nello stesso documento ..

In questo modo, devi solo caricare uno <img> o background e ancora ottenere più immagini caricate.

Answer 3

Questo ha funzionato perfettamente per me sia in Chrome che in IE per precaricare le immagini e scambiarle su hover. Il div "preload" non ha altezza/larghezza poiché le immagini sono impostate sullo sfondo, quindi non viene visualizzato sulla pagina e le immagini sono pronte quando si desidera scambiarle su hover. (Ovviamente si deve impostare l'altezza/larghezza sulle ancore sto solo mostrando il minimo CSS qui per ottenere il punto attraverso.)

HTML:

<div id="preload"></div> 
<div id="icons"> 
    <a href="http://..." class="social-button-1"></a> 
    <a href="http://..." class="social-button-2"></a> 
    <a href="http://..." class="social-button-3"></a> 
</div> 

CSS:

#preload {background: url('images/pic1b.png'), url('images/pic2b.png'), url('images/pic3b.png');} 
.social-button-1 {background: url('images/pic1a.png');} 
.social-button-2 {background: url('images/pic2a.png');} 
.social-button-3 {background: url('images/pic3a.png');} 
.social-button-1:hover {background: url('images/pic1b.png');} 
.social-button-2:hover {background: url('images/pic2b.png');} 
.social-button-3:hover {background: url('images/pic3b.png');}