2010-07-21 5 views
7

Cuando se tienen dos reglas como esta:¿El caché del navegador tendrá una imagen de fondo CSS si no se usa?

.foo { 
    background-image: url(foo.gif); 
} 

.foo { 
    background-image: url(bar.gif); 
} 

y tienen <div class='foo'>Foobar</div>

¿Su caché del navegador tanto, o simplemente la realidad, hacer que se muestra (bar.gif en este caso)?

¿Esto es cierto en todas las configuraciones? (Las reglas que están en diferentes archivos, !important se aplican a uno, etc)

Respuesta

3

Supongo que por "caché" aquí, quiere decir "precarga". El "almacenamiento en caché" real tiene que ver con los encabezados de caducidad y similares.

Se basa completamente en el comportamiento del navegador y en lo que elige hacer. Sin embargo, mi experiencia es que los navegadores modernos no se molestan en cargar una imagen definida en un archivo CSS a menos que se solicite realmente la imagen.

Esta es una de las razones por las que algunos optan por establecer el estado predeterminado y el estado de desplazamiento de un elemento en una imagen, y luego usar la propiedad background-position para cambiar que es visible. Hay un poco más de sobrecarga, pero tampoco hay demora entre el vuelo estacionario y el estado de vuelo estacionario que se muestra, lo que permite una experiencia más fluida.

+1

Gracias por el ejemplo de dónde podría importar, es bueno saberlo. –

1

mejor que puedo decir (con FireBug), que sólo lo hace con las imágenes que se visualizan, no las definidas.

0

si ambas reglas tienen la misma especificidad y luego se aplicarán. sepa más sobre specificity aquí.

+0

Sé cuál se aplica, incluso declaro cuál se muestra en la pregunta. Esa no es la pregunta. –

+0

solo aquellos que se aplican, serán almacenados en caché. – Developer

3

El navegador no carga las imágenes cuando lee el CSS, solo las tiene en cuenta. Y cuando comienza a renderizar la página, comienza a cargar imágenes.

Por lo tanto, en su caso ya ha anulado su regla CSS, y cuando el navegador muestra la página, ignora su regla CSS y, naturalmente, no carga su primera imagen.

1

Usando tail-f en mi registro de Apache locales, encontré lo siguiente:

::1 - - [21/Jul/2010:13:28:50 -0700] "GET /test.html HTTP/1.1" 200 127 
::1 - - [21/Jul/2010:13:28:50 -0700] "GET /test.css HTTP/1.1" 304 - 
::1 - - [21/Jul/2010:13:28:50 -0700] "GET /bar.gif HTTP/1.1" 404 205 

el uso de Firefox, el navegador sólo intentó cargar "bar.gif" (que fue 404 no encontrado, porque yo no' t tiene esa imagen).

Si está interesado en otros navegadores, podría probarlos también.

+0

+1 - Buena metodología de prueba: lo tendré en cuenta si necesito probar esto extensamente. Gracias. –

Cuestiones relacionadas