Chrome almacena en caché CSS pero no carga imágenes dentro del archivo CSS

Tenemos un problema extraño en el trabajo que ocurre solo en Chrome. Parece que el archivo css se almacena en caché y el contenido de este archivo no se vuelve a descargar.

El problema es que cuando se usa una sesión nueva, por ejemplo, "sesión privada", no se muestra la imagen "mainSprite.png".

Después de algunas pruebas, creo que el problema está relacionado con que hacemos redirecciones al principio si el usuario no está autenticado. Por lo que entiendo, es posible que no complete la descarga de los sprites vinculados dentro de los archivos css. Guardará en caché un objeto no válido tan pronto como comience la redirección y luego, en las siguientes páginas, no podrá mostrar una imagen correcta porque almacenó algo incorrecto en caché.

Lo extraño es que en realidad carga la imagen por completo en algún momento. Pero parece que no lo está refrescando en la memoria...

Hice un tiempo de espera de un segundo antes de comenzar las redirecciones en la primera carga y las imágenes se muestran correctamente. Esta es una solución rápida y no puedo esperar que todas las computadoras carguen en 1 segundo todas las imágenes contenidas en el css.

editar

Por lo que puedo decir, realmente parece una condición de carrera. Cambié el orden de carga. Usamos require.js. En lugar de cargar js después de css, empiezo a cargar js antes. Y las imágenes se cargan correctamente ahora en mi servidor local.

si a alguien le interesa que lo mire:

http://api.checklist.com

editar 2

Cuando las imágenes no están visibles, abrir nuevas pestañas tendrá el mismo problema. Cerrar el navegador y volver a abrirlo funcionará en la primera carga y las imágenes no se descargarán sino que se cargarán desde la memoria caché, lo que significa que antes de cerrar el navegador, la imagen se descargó.

preguntado el 28 de agosto de 12 a las 11:08

Busque imágenes en chrome://settings/content. ¿La configuración de Maby está apagada? -

No tiene nada que ver con la configuración, estoy probando las configuraciones predeterminadas y el modo de incógnito para usar sesiones "nuevas" sin almacenamiento en caché, etc. -

Solo una lluvia de ideas para ti. Para varias sesiones, también puede usar varios navegadores. Las imágenes son visibles para mí en Chrome -

¿Tiene la intención de almacenar en caché sus imágenes cuando su sitio esté activo/en producción? Si no, por ahora, puede configurar el no-cache, no-store meta atributos. -

@DonRhummy Bueno, es un poco tarde para eso. El proyecto no ha estado en mis manos durante mucho tiempo. Después de prueba y error, llegamos a la conclusión de que es un error en Chrome. La imagen se cargó desde un archivo css. El archivo css tendría tiempo para cargarse pero no las imágenes. (bueno, la imagen también se cargaría, pero más tarde). El código javascript ejecutaría una redirección antes de que se cargaran las imágenes. Cuando la página se vuelve a cargar, obtendría el css del caché y omitiría la carga de la imagen. Dicho esto, al eliminar Chrome, recargaría el css del caché (código de estado 302) y cargaría las imágenes del caché también (estado 302) -

6 Respuestas

Parece que el problema proviene de sus redireccionamientos, lamentablemente no pude ver su ejemplo (el enlace no se abre). De hecho, Google Chrome tiene problemas con el almacenamiento en caché, es molesto durante el tiempo de desarrollo (borre el caché, cargue una nueva imagen, haga lo mismo con la nueva imagen ...), si necesita borrar su caché, intente lo siguiente:

intenta ir a

cromo://cromo/configuración/clearBrowserData

en su navegador Chrome y verifique las opciones:

Vacíe el caché (también tengo Borrar el historial de descargas y Eliminar cookies y otros datos de sitios y complementos)

haga clic en el botón 'Borrar datos de navegación' debería

Respondido el 11 de diciembre de 12 a las 18:12

El almacenamiento en caché probablemente fue el problema, pero tenga en cuenta que estábamos impulsando la aplicación para la producción. Y soy bastante consciente de cómo borrar el caché de mi navegador. La cuestión es que estaba almacenando en caché una imagen vacía en la memoria al hacer la redirección (supongo). Cerrar el navegador y volver a abrirlo cargaría la imagen del caché del disco y la mostraría correctamente. No es necesario borrar el caché, simplemente reinicie Chrome, que es la parte extraña. Por lo que puedo decir, agregamos un onload handler en nuestros 2 sprites para esperar a que se carguen antes de la redirección. - Loïc Faure-Lacroix

Lo siento, pero creo que no entendí bien tu pregunta. ¿Qué te permite pensar que se almacenó en caché una imagen vacía? ¿Podría proporcionar algunos enlaces con ejemplos? desafortunadamente no puedo abrir su enlace de sandbox y ver lo que quiere decir - orustammanapov

Debo cerrar la pregunta ya que el sitio ya está en producción y no puedo solucionarlo de una mejor manera de lo que ya lo hicimos. Sandbox fue el servidor de desarrollo. - Loïc Faure-Lacroix

De todos modos intentaré explicarme un poco mejor. Hicimos una redirección a un servidor de autenticación a menos que ya estuviéramos conectados. (Presencia de una cookie). Estaba redirigiendo antes de que pudiera cargar completamente las páginas, etc. Después de realizar la autenticación, volvería a abrir el mismo index.html. Mirando lo que se cargó, pude ver que todo se cargó desde el caché. Excepto que la imagen no aparecía en las herramientas de desarrollo de Chrome. Chrome ni siquiera intentó cargarlo desde el caché o en cualquier otro lugar. Pero eso no es todo. - Loïc Faure-Lacroix

Después de cerrar todos los procesos de cromo. Podría volver a abrir Chrome y volver a abrir ese sitio con el registro de red abierto. En el primer intento, pude ver que esa imagen se cargó desde el caché como se esperaba. Pero si limpiaría mi caché/cookies. E inicie sesión nuevamente, volvería a descargar la imagen mientras redirigiría y esa imagen no sería visible siempre que no elimine todos los procesos de Chrome. Debido a que la imagen se almacenó en caché, pero siempre que Chrome no se reiniciara, no mostraría la imagen del caché, pero nada. - Loïc Faure-Lacroix

Todo lo que necesita hacer es rastrear su lista de efectivo a través de Chrome, y por lo que veo es que recibió este error que hace que no se almacene en caché:

TypeError no capturado: el objeto [objeto Objeto] no tiene un método 'marcador de posición'

Entonces, si desea rastrear, puede usar el modo fuera de línea del manifiesto o rastrear a través de su código.

Simplemente siguiendo y probando su página, capté dónde está el error:

archivo: scripts2.js Línea 20 --> $('input[placeholder]').placeholder();

que debe verificar el nombre del marcador de posición y cambiarlo aquí en esta etiqueta.

Gracias

Respondido el 07 de Septiembre de 12 a las 12:09

el sitio que realmente vio no es en el que estamos trabajando... Olvidé que no puede iniciar sesión en el sitio sin una contraseña y un nombre de usuario... - Loïc Faure-Lacroix

Supongo que su aplicación de servidor/backend tiene rutas configuradas. ¡Me gusta este juego! ejemplo de marco:

# Ignore favicon requests
GET     /favicon.ico                    404

# Map static resources from the /app/public folder to the /public path
GET     /public/                        staticDir:public

# Catch all
*       /{controller}                   {controller}.index

De acuerdo con su resumen, sugiero configurar una ruta de carpeta estática (donde están las imágenes) en el archivo de configuración o htaccess como desee, luego verifique la URL de la imagen en la barra de URL del navegador (con la sesión vacía). ¡Eso debería funcionar!

Respondido el 12 de Septiembre de 12 a las 09:09

Todos los archivos son estáticos. No hay ningún archivo dinámico. Todo se solicita desde un servidor RESTlike usando ajax. - Loïc Faure-Lacroix

Entonces, ¿cuál es el resultado cuando consulta una imagen con una sesión vacía (en la barra de direcciones)? - zsitro

Si consulto la imagen y solo la imagen, se carga sin problema el 100% de las veces. Si consulto la página del sistema de gestión de tiempo, no la pantalla de inicio de sesión. La aplicación inicia las redirecciones de autenticación y las imágenes se cargan pero no son visibles. Por ejemplo, después de cerrar la carga de Chrome, el sitio web cargará imágenes del caché y serán visibles. Cuando las imágenes no están visibles, Chrome carga el archivo css desde el caché y ni siquiera intenta cargar las imágenes. - Loïc Faure-Lacroix

¿Quizás usar JS para descargar el archivo CSS una vez que el sitio se carga solo en Chrome? - amandathewebdev

Primero, le sugiero que primero intente encontrar formas de reducir los redireccionamientos. Si es posible, sugeriría que sería mucho más recomendable intentar crear su contenido dinámicamente en función de la autenticación de sus usuarios utilizando lenguajes como PHP or ASP (solo por nombrar dos).

La forma clásica de deshabilitar el almacenamiento en caché en una página web es establecer dos <meta> etiquetas dentro de tu <head> </head> etiquetas Sin embargo, debe tener en cuenta que estos son técnicamente no "correcto" ya que no son parte de ninguno de los "oficial" documentación de normas. Esto también significa que nuevamente me inclinaría por mi primera sugerencia de encontrar un mejor sistema de entrega que a su vez debería evitar el problema.

Entonces, para fines de "prueba", las etiquetas serían:

<HEAD>
    <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
    <META HTTP-EQUIV="EXPIRES" CONTENT="0">
</HEAD>

Respondido el 27 de Septiembre de 12 a las 19:09

Tal vez no entiendo su pregunta o dilema (tal vez por falta de explicación o porque no puedo ver su página en ese enlace desde que ejecuto Chrome), pero hay un ejemplo que encontré aquí que funciona en Chrome simplemente usando Javascript/jQuery para cargar, en lugar de CSS:

http://jsfiddle.net/2Cgyg/6/

Usar imagen en URL: http://www.w3schools.com/cssref/img_tree.gif

Y aunque la respuesta aceptada no me funcionó en Chrome, esta es la pregunta que obtuve en jsFiddle arriba, de:

Cargar imagen desde javascript

Todo el almacenamiento en caché, etc. es innecesario, e incluso algo que no querría hacer si sus imágenes se actualizan alguna vez a otra cosa: no aparecerán sin forzar una actualización que solo puede hacer alterando el nombre del archivo de esta manera para evitar que los usuarios no vean tu imagen actualizada:

myPic.jpg?MMDDYYYY

Y puede establecer la fecha de acuerdo con la fecha en que la está modificando.

contestado el 23 de mayo de 17 a las 13:05

limpie el historial de su navegador como caché, las cookies limpian el archivo temporal de Internet

si el problema no se resuelve, reinstale el navegador, su problema se resuelve definitivamente

respondido 09 nov., 15:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.