Chrome缓存CSS但不在CSS文件中加载图片

时间:2012-08-28 10:44:34

标签: css google-chrome caching

我们在工作中遇到一个奇怪的问题,只发生在chrome中。看起来css文件正在缓存,并且不会重新下载此文件的内容。

问题是当使用新会话例如“私人会话”时,图像“mainSprite.png”没有显示。

经过一些测试后,我认为如果用户未经过身份验证,问题与我们在开始时进行重定向有关。根据我的理解,它可能无法完成在css文件中链接的精灵的下载。一旦重定向开始,它将立即缓存无效对象,然后在随后的页面上,它将无法显示正确的图像,因为它缓存了错误。

奇怪的是它实际上在某个时刻完全加载了图像。但它看起来并没有在内存中刷新它......

在第一次加载开始重定向并正确显示图像之前,我做了一秒的超时。这是一个快速修复,我不能指望每台计算机在1秒内加载css中包含的每个图像。

修改

据我所知,它看起来真的像竞争条件。我改变了加载顺序。我们使用require.js。我没有在css之后加载js,而是在之前启动js加载。现在,我的本地服务器上的图像正确加载。

如果有人有兴趣调查它:

http://api.checklist.com

编辑2

当图像不可见时,打开新标签会出现同样的问题。关闭浏览器并重新打开它将在首次加载时工作,图像不会被下载,而是从Cache加载,这意味着在关闭浏览器之前,图像确实已下载。

6 个答案:

答案 0 :(得分:1)

看起来您的重定向问题很遗憾,我无法看到您的示例(链接无法打开)。谷歌浏览器确实存在问题,缓存它在开发时间很烦人(清理缓存,加载新图像,为新图像做同样的事情......),如果你需要清除你的缓存,请尝试下面的内容:

尝试去

<强>铬://铬/设置/ clearBrowserData

在Chrome浏览器中

并检查选项:

清空缓存(我还清除下载历史记录和删除Cookie以及其他网站和插件数据)

点击“清除浏览数据”按钮

答案 1 :(得分:0)

您需要做的就是通过chrome追踪您的现金清单,而且从我看到的是您收到此错误导致其未被缓存:

  

未捕获的TypeError:对象[object Object]没有方法'placeholder'

因此,如果要跟踪,可以使用清单脱机模式或通过代码跟踪。

只需关注并测试您的页面,我确实抓住了错误的位置:

  

file:scripts2.js第20行 - &gt; $( '输入[占位符')占位符();

您需要检查占位符的名称,并在此标记中进行更改。

谢谢

答案 2 :(得分:0)

我认为您的服务器/后端应用程序已设置路由。喜欢这个玩!框架示例:

# 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

根据您的总结,我建议您根据需要在配置文件或htaccess中设置静态文件夹路径(图像所在的位置),然后在浏览器URL栏中检查图像URL(使用空会话)。这应该有效!

答案 3 :(得分:0)

首先,我建议您首先尝试找到缩小重定向的方法。如果可能,我建议尝试使用 PHP ASP 等语言基于用户身份验证动态创建内容更合适(仅举两个名称) )。

在网页上停用缓存的经典方法是在 <meta> 标记内设置两个 <head> </head> 标记。但是,您应该注意,这些在技术上“正确”,因为它们不是任何“官方”标准文档的一部分。这也意味着我将再次倾向于我的第一个建议,即找到一个更好的交付系统,这反过来应该可以防止这个问题。

因此,为了“测试”目的,标签将是:

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

答案 4 :(得分:0)

也许我不理解你的问题或困境(也许是因为我没有解释或者因为我在运行Chrome时无法在该链接上看到你的页面),但还有一个例子我跑到这里只能使用Javascript / jQuery来加载Chrome,而不是CSS:

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

在网址处使用图片:http://www.w3schools.com/cssref/img_tree.gif

虽然接受的答案在Chrome中对我没有用,但这是我从上面获得jsFiddle的问题,来自:

Load Image from javascript

所有缓存等都是不必要的,如果您的图片被更新为其他内容,即使是您不想做的事情 - 它们也不会在不强制刷新的情况下出现,您只能这样做通过改变这样的文件名来避免用户看不到你更新的图像:

myPic.jpg?MMDDYYYY

您可以根据修改日期来设置日期。

答案 5 :(得分:0)

清理浏览器历史记录,例如缓存,Cookie 清理临时互联网文件

如果问题没有解决,那么重新安装浏览器肯定会解决您的问题