2009-09-16 16 views
26

Tengo un problema donde los usuarios informan que sus imágenes no se están cargando y las antiguas todavía están allí. En una inspección más cercana, las nuevas imágenes están allí, solo tienen el mismo nombre que la anterior. Lo que hago en la carga es que cambie el nombre de las imágenes para fines de SEO. Cuando eliminan una imagen, el índice anterior se vuelve disponible y se reutiliza. Por lo tanto, tiene el mismo nombre de imagen.¿Hay alguna manera de obligar a los navegadores a actualizar/descargar imágenes?

¿Hay alguna manera de (creo que tal vez haya una metaetiqueta para esto) decirle al navegador que no use su cahce?

La mejor respuesta es cambiar el nombre de la imagen a algo totalmente nuevo. Voy a trabajar en eso, pero mientras tanto, es la solución rápida mientras trabajo en el problema más grande.

Respuesta

81

añadir una cadena de consulta con un número arbitrario único (o el tiempo o número de versión, etc.):

<img src="image.png?80172489074" alt="a cool image" /> 

Esto dará lugar a una nueva solicitud, a causa de los diferentes URL.

+2

+1, pero estrictamente hablando no es un nombre de archivo diferente ;-) El componente del nombre de archivo es el mismo, pero la URL es ciertamente diferente. –

+8

Gubmo, el único es demasiado, lo mejor en este caso sería agregar el mtime del archivo, de esta manera solo se volverá a cargar cuando sea necesario. –

+2

La mejor manera será usar un número de versión de la versión. – rahul

2

puede controlar el comportamiento de la memoria caché jugando con los encabezados HTTP.

establecer el encabezado expira en pasado obligaría al navegador a no usar la versión en caché.

Expires: Sat, 26 Jul 1997 05:00:00 GMT 

Puede consultar el RFC para tener más detalles.

+1

RageZ el problema aquí es que también tendrán que conseguir que ciertos desarrolladores de navegador consulten el RFC. –

+0

sí ... pero al menos ese es el documento relevante. después de la implementación falla es algo así como ... – RageZ

+0

Estoy a favor de la implementación adecuada, pero tenemos que lidiar con la realidad. –

4

Usted puede poner en http-equiv<meta> etiqueta que le dirá navegador no utilizar la memoria caché (o incluso mejor - utilizarlo de alguna manera definida), pero es mejor para configurar el servidor para enviar adecuada http cache cabeceras. Consulte article on caching.

Aún así, es posible que algunos navegadores no sean compatibles con todos los estándares http, pero creo que es el camino a seguir.

+0

Ese es el camino a seguir si planeas hacerlo por el libro. – Mike

+0

Por el contrario, el uso de soluciones admite mal soporte de navegadores para estas ideas;) Veo su punto, y sé que la discusión adicional generalmente no lleva a ninguna parte - algo es "mejor" pero no funciona como se esperaba, algo es "peor" pero lo hace trabajo. Todo depende de webdev, qué elegirá él/ella. – samuil

+0

samuil, en realidad, * a quién * (s) quiere para una audiencia ;-) –

1

Si observa los datos intercambiados entre su navegador y el servidor, verá que el navegador enviará una solicitud HTTP HEAD para las imágenes. El resultado contendrá la hora de modificación (pero no los datos de imagen reales). Asegúrese de que esta vez cambie si la imagen cambia en el servidor y el navegador debe descargar la imagen nuevamente.

+0

Depende del navegador: una técnica de latencia menor es usar el encabezado 'If-Modified-Since' en una solicitud' GET'. La consecuencia sigue siendo la misma: asegúrese de informar correctamente la hora de modificación del archivo, para que la invalidación de la memoria caché funcione correctamente. –

13

Es difícil. ¿De verdad quieres que las imágenes se almacenan en caché, pero luego no desea almacenar en caché una vez por otras nuevas disponibles:

  • Usando expira cabecera con una fecha en el pasado impide cualquier almacenamiento en caché. Malo
  • Agregar un parámetro de "almacenamiento en memoria caché" 342038402 puede solucionar el problema, pero también puede evitar que la imagen se almacene en la memoria caché, que no es lo que desea. Malo.
  • El uso del encabezado caduca con un corto (digamos 1 h) caduca es mejor ... después de una hora el usuario verá la imagen, pero su servidor web no tendrá que servirla cada vez. Compromiso, pero ¿qué tiempo funciona? No es realmente factible.

¿La solución? Puedo pensar en dos buenas opciones:

  • Mire eTags, y su capacidad para usarlos. Estos están diseñados para esta situación. El navegador preguntará explícitamente a su servidor si el archivo está actualizado o no.Puedes encender esto en apache si no lo tienes listo.
  • Crea una nueva URL para cada nueva imagen (y utiliza un encabezado de futuro lejano expira). Esto es en lo que estás trabajando.
+1

"Agregar un" almacenamiento en memoria caché "... Malo". Esto no es cierto, forzará al navegador a almacenar en caché esta versión específica de la imagen, por lo que image.png? 342038402 se almacenará en caché como esa versión. Si tiene la misma imagen con una cadena de consulta diferente, es incorrecta. – michaelmol

+0

michaelmol, pero luego tendrá que crear manualmente un nuevo número aleatorio cada vez que se cambie la imagen? Te entiendo, no quiero que nunca guarde en la memoria caché. Usando esta técnica, no veo una manera de subir la imagen a su ubicación con el mismo nombre y tener algo que actualice programáticamente la ruta con un nuevo número aleatorio –

+2

@ChadMizner Si usas PHP, puedes usar PHP ['filemtime (string $ filename) '] (http://php.net/manual/en/function.filemtime.php) function en combinación con el parámetro" cache busting ". De esta forma, la URL de ese archivo cambiará cada vez que se cambie el archivo solicitado. (Créditos a Michael Krelin - hacker). – RicoBrassers

3

añada la fecha y hora actual a la imagen src:

<img src="yourImage.png?v=<?php echo Date("Y.m.d.G.i.s")?>" /> 
+0

También podría desactivar el almacenamiento en caché, ya que su ejemplo obligará a los navegadores a descargar los archivos cada vez (porque la marca de tiempo cambiará cada segundo). Sugiero eliminar las i y las s al final, por lo que la marca de tiempo cambia cada hora. De esta forma, los navegadores descargarán las imágenes solo una vez por hora. "Y.m.d.G" – Shumoapp

0

En PHP puede enviar un número aleatorio o la fecha y hora actual:

<img src="image.jpg?<?=Date('U')?>"> 

o

<img src="image.jpg?<?=rand(1,32000)?>"> 
-1

ese no fue el resultado correcto, creo que esta es la forma de programarlo correcto.

<td><?php echo "<img heigth=90 width=260 border=1 vspace=2 hspace=2 src=".$row['address']."?=".rand(1,999)."/>" ?></td> 
1

en PHP puede utilizar este truco

<img src="image.png?<?php echo time(); ?>" /> 

La función time() muestran la fecha y hora actual. Cada carga de página es diferente. Entonces, este código engaña al navegador: lee otra ruta y "piensa" que la imagen ha cambiado desde que el usuario visitó el sitio la última vez. Y tiene que volver a descargarlo, en lugar de usar el de caché.

+0

......... ¿mejor ahora? –

0

Go Random. Simplemente use un número aleatorio y añádalo con el nombre de archivo de la imagen.

<img src="image.jpg?<?=rand(1,1000000)?>"> 
Cuestiones relacionadas