Anulación de estilos de imágenes de fondo de CSS: ¿se cargan ambas imágenes?

Question

Si tengo 2 estilos CSS que asignan imágenes de fondo a un elemento, y un estilo prevalece sobre el otro. ¿Las dos imágenes serán descargadas por el navegador o simplemente por la superior?

razonamiento que estoy preguntando es que recientemente asistí a un taller sobre hojas de estilo condicionales para dispositivos móviles. Si anulo mis imágenes bg normales con las más pequeñas para ahorrar ancho de banda, ¿se cargarán las imágenes más grandes de todos modos? Esto parecía ser lo que el tipo estaba diciendo, pero me parece extraño que funcione de esta manera.

Answer 1

Parece que en algunos casos la respuesta es sí:

http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/

http://www.cloudfour.com/examples/mediaqueries/image-test/#t4

Answer 2

¿No puedes hacer un experimento y ver los archivos de registro web para ver qué está sucediendo?

De lo contrario, ¿por qué no tener un poco de PHP para seleccionar las hojas de estilo apropiadas según el dispositivo?

Answer 3

La imagen reemplazada no se cargará.

Para que quede claro, por ejemplo: http://jsfiddle.net/thirtydot/MjKfG/1/show/

<div id="test">test</div> 

div { 
    background: url(http://dummyimage.com/600x400/000/fff) 
} 
#test { 
    background: url(http://dummyimage.com/200); 
    width: 200px; 
    height: 200px 
} 

Sólo http://dummyimage.com/200 se cargará.

Esto es cierto al menos en Chrome, Safari, Firefox, IE8/9, Opera.

I'd guess es cierto en todos los navegadores, porque es una optimización simple y efectiva.

Answer 4

La respuesta es NO. El primero fue anulado no cargará la propiedad de fondo. ¿Por qué? Porque los navegadores cargan su archivo css primero antes de cargar cualquier otro recurso. Primero manejan archivos css y luego comienzan a cargar imágenes según el orden y el orden de prioridad.

Por ejemplo:

div { 
    border: solid 1px #000000; 
    background: url('images/sprites.png') no-repeat x y; 
} 

.mobile div { 
    border: solid 1px #000000; 
    background: url('images/sprites_mobile.png') no-repeat x y; 
} 

Navegadores procesará esta css para su móvil Para hacerse así:

div { 
    border: solid 1px #000000; 
    background: url('images/sprites_mobile.png') no-repeat x y; 
} 

Y ahora, ya navegadores ignorado el sprites_mobile.png para la carga.