Las imágenes de hojas de estilo no son recargadas por Firefox o Safari
https://stackoverflow.com/questions/200470
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Hemos descubierto que Firefox (al menos v3) y Safari no almacenan en caché 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 tenga la imagen en el caché, nunca verificará si ha cambiado.
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 teniendo la imagen anterior, a menos que actualicen explícitamente la página. IE, por otro lado, detecta que la imagen ha cambiado y la recarga automáticamente.
¿Es este un problema conocido? ¿Alguna solución? Gracias!
EDITAR: la solución no es presionar F5. Puedo hacer esto. Pero nuestros clientes solo visitarán nuestro sitio web y obtendrán los gráficos antiguos y obsoletos. ¿Cómo sabrían que tendrían que presionar F5?
He instalado Firebug y he confirmado 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 cambiado. Cuando presionas F5, verifica todas las imágenes, y el servidor web responde muy bien con 304, a excepción de las que han cambiado , donde responde con 200 OK.
Entonces, ¿hay alguna manera de instar a Firefox a que automáticamente actualice una imagen a la que se hace referencia desde un archivo CSS? Seguramente no soy el único con este problema?
EDIT2: probé esto con localhost, y la respuesta de la imagen no contiene ninguna información de almacenamiento en caché, 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 leído un poco más y parece que no se puede arreglar, ya que Firefox, o la mayoría de los navegadores, asumirá que una imagen no cambia muy a menudo (caduca el encabezado y todo).
Solución
Simplemente agregaría un valor de cadena de consulta a la url de la imagen. Por lo general, solo creo un " número de versión " e increméntelo cada vez que cambie la imagen:
div#news {
background: url(images/newsitem_background.jpg?v=00001) no-repeat;
...
}
Otros consejos
Para evitar este problema, he visto a los webmasters agregar número de versión a sus archivos. Así que cargan site-look-124.css y newsitem_background-7.jpg.
No es una mala solución, en mi humilde opinión.
Verifique sus encabezados HTTP en las imágenes que está sirviendo, así como los archivos CSS.
Si alguno de ellos está configurado en caché (o falta), encontrará que el navegador está almacenando en caché correctamente los archivos.
Sé que esto probablemente no es lo que quieres escuchar, pero es mucho más probable que Firefox siga el estándar y que IE esté haciendo algo un poco extraño (y simplemente confías en él;)).
El comportamiento del almacenamiento en caché depende de qué encabezados de almacenamiento en caché se envían con sus imágenes. Si estás en posición de publicar los encabezados (o una URL en una de las imágenes), entonces podremos decirte más específicamente qué está pasando.
Esto no solucionará el problema de que Firefox no verifique si la imagen ha expirado, pero lo que puede hacer para asegurarse de que sus clientes vean la imagen correcta es:
Establezca la imagen en el CSS en un script PHP o similar que devuelva la imagen:
div#news {
background: #FFFFFF url(images/background.php?name=newsitem) no-repeat;
...
}
Luego usa el script para devolver la imagen "
<?php
$name = isset( Esto no solucionará el problema de que Firefox no verifique si la imagen ha expirado, pero lo que puede hacer para asegurarse de que sus clientes vean la imagen correcta es:
Establezca la imagen en el CSS en un script PHP o similar que devuelva la imagen:
div#news {
background: #FFFFFF url(images/background.php?name=newsitem) no-repeat;
...
}
Luego usa el script para devolver la imagen "
<*>
Lo uso en mi servidor doméstico para devolver aleatoriamente una imagen de fondo para algunas de mis páginas, y Firefox no parece almacenarlas en caché. También puedes hacer un poco de estupidez con las imágenes si lo deseas.
REQUEST['name']) ? Esto no solucionará el problema de que Firefox no verifique si la imagen ha expirado, pero lo que puede hacer para asegurarse de que sus clientes vean la imagen correcta es:
Establezca la imagen en el CSS en un script PHP o similar que devuelva la imagen:
div#news {
background: #FFFFFF url(images/background.php?name=newsitem) no-repeat;
...
}
Luego usa el script para devolver la imagen "
<*>
Lo uso en mi servidor doméstico para devolver aleatoriamente una imagen de fondo para algunas de mis páginas, y Firefox no parece almacenarlas en caché. También puedes hacer un poco de estupidez con las imágenes si lo deseas.
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 doméstico para devolver aleatoriamente una imagen de fondo para algunas de mis páginas, y Firefox no parece almacenarlas en caché. También puedes hacer un poco de estupidez con las imágenes si lo deseas.
Otra solución alternativa rápida (si esto ocurre principalmente en medio del diseño web) es ver la página css real en Firefox y volver a cargar la página, luego, cuando regrese al sitio web, el navegador leerá el css actual. página.
por supuesto, esta es una solución temporal solo para el diseñador web
Intente mantener presionada la tecla MAYÚS mientras hace clic en recargar (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 he notado este problema. Quizás su servidor está devolviendo una respuesta 304 (no modificada).
