precargar imágenes con imágenes de fondo CSS?

Question

existe la forma simple y conocida de precargar imágenes con un div colocado fuera de la ventana gráfica que contiene algunas imágenes.

¿Es realmente lo mismo simplemente usar la propiedad background en css y aplicar varias imágenes a un div sin contenido?

como tal?

<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; 
} 

¿Esto realmente funcionaría? ¿O la última propiedad de fondo sobrescribe las otras declaraciones?

¿Es posible con fondos múltiples CSS3?

Answer 1

Cuando separe las imágenes de fondo de la siguiente manera: background-image: url(../images/misc/formLoader.gif), url(../images/misc/selectLoader.gif), url(../images/misc/projectLoader.gif); Debería funcionar. No sé, si eso funciona con `background: '. Solo pruébalo.

Answer 2

Puede poner múltiples fondos en un elemento con css3. http://www.css3.info/preview/multiple-backgrounds/

---

Si quieres que funcione en IE, así .. ¿Usted quiere hacer de la manera <img>.

---

también una buena manera es poner varias imágenes en el documento una única imagen y aplicar esa imagen de fondo para separar los elementos y utilizar background-position: -20px 0px; para definir la posición en la que se encuentra una imagen específica. Esto hace que todas estas imágenes en este documento se carguen exactamente al mismo tiempo que en el mismo documento.

Usando esta forma, solo tiene que cargar un <img> o background y aun así obtener múltiples imágenes cargadas.

Answer 3

Esto funcionó muy bien para mí, tanto en Chrome como en IE, para precargar las imágenes y cambiarlas al desplazarse. La div "precarga" no tiene alto/ancho ya que las imágenes están configuradas en segundo plano, por lo que no se muestra en la página, y las imágenes están listas cuando desea intercambiarlas al pasar el mouse. (Es obvio que hay que establecer la altura/anchura de los anclajes Sólo estoy mostrando CSS mínimos aquí para obtener el punto a través.)

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');}