Forzar navegador para volver a leer las imágenes en caché

.button { background: url (../ Images/button.png); }Forzar navegador para volver a leer las imágenes en caché

Problema: por razón de rendimiento, todo el contenido estático tiene encabezados de caducidad y se almacena en la caché mediante el navegador. Cuando la imagen cambia, el usuario debe actualizar el caché (Ctrl + F5 en IE). Quiero que las imágenes se almacenen en caché, pero cuando sea necesario, deben volver a cargarse automáticamente.

Pregunta: es el siguiente enfoque 'válido'?

.button { 
    background: url(../Images/button.png?v=1234); 
}

donde v = 1234 es la versión de mi sitio. No sé si es 100% válido escribir tales cosas en CSS y sí quiero que los navegadores guarden imágenes en caché si la versión es la misma. ¿Todos los navegadores modernos almacenan en caché correctamente los datos con la parte de los parámetros de URL?

Gracias.

Fuente

2009-09-09 Roman

Creo que eso no funciona en todos los navegadores. Algunos ignoran la cadena de consulta. Quizás podría agregar la versión en el nombre de la imagen. Hay marcos que ayudan a hacer eso, por lo que no es necesario tener button_v1.png, button_v2.png, etc. –

Las buenas noticias para mi sitio: no es necesario que funcionen al 100% correctamente en IE6. Si '? 1234' es una solución válida para IE7-8, Firefox 3+, Chrome, Opera y Safari, entonces esta solución es aplicable para mí. – Roman

Parece un buen enfoque para mí, funcionará bien en CSS en los navegadores modernos: el navegador buscará en la dirección de la imagen (incluido el ?v=1234), verá que no está en la memoria caché y enviará un mensaje nuevo. solicitud.

Fuente

2009-09-09 12:28:26

¿Cuál es el motivo del voto a la baja? – rahul

Eso no es del todo cierto ... IE es el más molesto, siendo realmente capaz de ignorar los enlaces hash y los encabezados de control de caché ... Al parecer es el "mejor" enfoque ... – yoda

puede estar relacionado con el comentario sobre la pregunta original " Creo que eso no funciona en todos los navegadores ", parece un enfoque válido si suficientes navegadores lo admiten –

Esto se trata en la regla 3 de High Performance Web Sites: "Agregar un caducidad o un encabezado de control de caché". Uno de los enfoques recomendados es la versión de los archivos en lugar del sitio.

Desde el accompanying blog:

tener en cuenta, si se utiliza un futuro lejano Expira cabecera tiene que cambiar el nombre de archivo del componente siempre que los cambios de componentes. En Yahoo! a menudo hacemos de este paso parte del proceso de compilación: un número de versión está incrustado en el nombre del archivo del componente, por ejemplo, yahoo_2.0.6.js.

Fuente

2009-09-09 12:31:43

Hago tal denominación de versión de archivo (por ejemplo, yahoo_2.0.6.js) con archivos JavaScript y CSS, pero me resulta mucho más difícil cambiar el nombre de todas las imágenes que se han cambiado, por eso Quiero un enfoque que no requiera cambiar el nombre del archivo de imagen. Hay otra desventaja con el enfoque '? 1234': la nueva versión del sitio invalida todas las imágenes, incluso no modificadas, pero al menos esto es menos doloroso en el mantenimiento. – Roman

Forzar navegador para volver a leer las imágenes en caché

Respuesta

Cuestiones relacionadas