2008-10-14 18 views
5

Hemos descubierto que Firefox (al menos v3) y Safari no guardan correctamente las imágenes a las que se hace referencia desde un archivo css. Las imágenes se almacenan en caché, pero nunca se actualizan, incluso si las cambia en el servidor. Una vez que Firefox tiene la imagen en la memoria caché, nunca verificará si ha cambiado.Las imágenes de la hoja de estilo no se vuelven a cargar en Firefox o Safari

Nuestro archivo CSS se ve así:

div#news { 
    background: #FFFFFF url(images/newsitem_background.jpg) no-repeat; 
    ... 
} 

El problema es que si ahora cambiamos la imagen newsitem_background.jpg, todos los usuarios de Firefox seguirán recibiendo la imagen de edad, a menos que explícitamente refrescar la página. IE, por otro lado, detecta que la imagen ha cambiado y la recarga automáticamente.

¿Es esto un problema conocido? ¿Alguna solución? ¡Gracias!

EDITAR: La solución es no presionar F5. Puedo hacer esto. Pero nuestros clientes simplemente visitarán nuestro sitio web y obtendrán los gráficos viejos y desactualizados. ¿Cómo sabrían que tendrían que presionar F5?

He instalado Firebug y confirmé lo que ya sospechaba: Firefox simplemente ni siquiera intenta recuperar las imágenes a las que se hace referencia desde un archivo css, para averiguar si se han modificado. Cuando presiona F5, comprueba todas las imágenes, y el servidor web responde amablemente con 304, excepto aquellos que han cambiado, donde responde con 200 OK.

Entonces, ¿hay alguna manera de instar a Firefox a automáticamente actualizar una imagen a la que se hace referencia desde un archivo css? Seguramente no soy el único con este problema?

Edit2: He probado esto con el localhost, y la respuesta de la imagen no contiene ninguna información de almacenamiento en caché, que es:

Server Microsoft-IIS/5.1 
X-Powered-By ASP.NET 
Date Tue, 14 Oct 2008 11:01:27 GMT 
Content-Type image/jpeg 
Accept-Ranges bytes 
Last-Modified Tue, 14 Oct 2008 11:00:43 GMT 
Etag "7ab3aa1aec2dc91:9f4" 
Content-Length 61196 

Edit3: He hecho un poco más de lectura y parece que sólo puede' Se puede arreglar, ya que Firefox, o la mayoría de los navegadores, simplemente suponen que una imagen no cambia muy a menudo (caduca el encabezado y todo).

Respuesta

8

Simplemente agregaría un valor de la cadena de consulta a la url de la imagen. Por lo general sólo se crea un "número de versión" y se incrementará cada vez que cambia la imagen:

div#news { 
    background: url(images/newsitem_background.jpg?v=00001) no-repeat; 
    ... 
} 
+0

Hemos llegado a la misma conclusión aquí. Necesitamos agregar una cadena a la URL de la imagen. – mark

+0

use ctrl + f5 para recargar –

0

Intente mantener presionada la tecla MAYÚSCULAS mientras hace clic en volver a cargar (o presione F5).

De lo contrario, use una herramienta como Firebug para verificar los encabezados de solicitud/respuesta HTTP y observe los valores de encabezado que controlan el almacenamiento en caché. Nunca me he dado cuenta de este problema. Tal vez su servidor devuelva una respuesta 304 (no modificada).

+0

Esta no es la solución, véase la pregunta editada –

0

Sé que probablemente esto no es lo que quieres escuchar, pero es mucho más probable que Firefox esté siguiendo el estándar e IE está haciendo algo un poco extraño (y simplemente dependes de él;)).

El comportamiento de almacenamiento en caché depende de qué encabezados de almacenamiento en caché se envíen con sus imágenes. Si está en condiciones de publicar los encabezados (o una URL a una de las imágenes), entonces podremos decirle más específicamente lo que está sucediendo.

1

Verifique sus encabezados HTTP en las imágenes que está publicando, así como los archivos CSS.

Si alguno de ellos está configurado en caché (o falta), encontrará que el navegador está almacenando en caché correctamente el archivo (s).

2

Para evitar este problema, he visto webmasters que agregan el número de versión a sus archivos. Entonces cargan site-look-124.css y newsitem_background-7.jpg.

No es una mala solución, en mi humilde opinión.

0

Esto no va a solucionar el problema de Firefox no comprobar si la imagen ha expirado, pero lo que puede hacer para asegurarse de que sus clientes ver la imagen correcta es:

Establecer la imagen en el css a un PHP o secuencia de comandos similar que devuelve la imagen:

div#news { 
    background: #FFFFFF url(images/background.php?name=newsitem) no-repeat; 
    ... 
} 

continuación, utilizar la secuencia de comandos para devolver la imagen"

<?php 
$name = isset($_REQUEST['name']) ? $_REQUEST['name'] : false; 
switch($name) { 
    case 'newsitem': 
     $filename = 'news_item_background.jpg'; 
    break; 
    default: 
     $filename = 'common_background.jpg'; 
    break; 
} 

header("Content-Type: image/jpeg"); 
header("Content-Transfer-Encoding: binary"); 
$fp = fopen($filename , "r"); 
if ($fp) fpassthru($fp); 

lo uso en mi servidor para volver al azar un fondo imag e para algunas de mis páginas, y Firefox no parece guardarlas en caché. También puede hacer estupideces funky con las imágenes si lo desea.

0

Otra solución alternativa rápida (si esto ocurre principalmente en el centro de diseño web) es para ver la página real css En Firefox, y vuelva a cargar la página, cuando regrese al sitio web, el navegador leerá la página actual de CSS.

por supuesto, esta es una solución temporal sólo por el diseñador de páginas web

+0

en ese caso ctrl + f5 succifes para mí, generalmente –

+0

* basta por supuesto –

Cuestiones relacionadas