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

We're having a weird problem at work that happens only in chrome. It looks like the css file is getting cached and the content of this file isn't getting re-downloaded.

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

The problem is that when using a fresh session for example "private session", the image "mainSprite.png" isn't getting displayed.

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

After some tests, I believe the problem is related to us doing redirects at the beginning if the user isn't authenticated. From what I understand, it might not complete the download of the sprites linked inside the css files. It will cache an invalid object as soon as the redirect starts and then on the following pages, it will fail to display a correct image since it cached something wrong.

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

The strange thing is that it actually loads the image completely at some point. But it looks like it's not refreshing it in memory...

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

I did a timeout of one second before starting redirects on first load and images correctly display. This is a quick fix and I can't expect every computer to load in 1 second every images contained in the css.

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

edit

编辑

As far as I can say, it really looks like a race condition. I changed the order of loading. We use require.js. Instead of loading js after css, I start js loading before. And images are getting loaded correctly now on my local server.

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

if someone is interested to look into it:

如果有人有兴趣研究它：

http://api.checklist.com

edit 2

编辑2

When images aren't visible, opening new tabs will have the same problem. Closing the browser and reopening it will work on first load and images isn't being downloaded but loaded from Cache which means that before closing the browser, the image was indeed downloaded.

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

6 个解决方案

#1

It looks like the problem coming from your redirects unfortunately i couldn't see your example ( link won't open ). Google chrome has indeed issues with caching it's annoying during development time ( clear up the cache, load new image, do the same for new image..), if you need to clear your cache try the folowing:

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

try to go to

试着去

chrome://chrome/settings/clearBrowserData

铬：铬// /设置/ clearBrowserData

in your chrome browser and check the options:

在您的Chrome浏览器中并检查选项：

Empty the Cache( i have also Clear download history and Delete cookies and other site and plug-in data )

清空缓存（我还清除了下载历史记录和删除cookie以及其他网站和插件数据）

click on 'Clear Browsing Data' button it should

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

#2

All what you need to do is to trace your cash list via chrome, and from what I see is that you got this error which make it not cached:

您需要做的就是通过chrome跟踪您的现金清单，从我看到的是您收到此错误，使其无法缓存：

Uncaught TypeError: Object [object Object] has no method 'placeholder'

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

So if you want to trace, you can use the manifest offline mode or you trace via your code.

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

Just following and test your page, I did catch where the error is:

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

file: scripts2.js Line 20 --> $('input[placeholder]').placeholder();

file：scripts2.js第20行 - > $（'input [placeholder]'）。placeholder（）;

which you need to check the name of the place holder and change it here in this tag.

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

Thank you

谢谢

#3

I assume your server/backend app has routes set up. Like this Play! framework example:

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

# 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

According your summary I suggest to set up a static folder route (where the images are) in config file or htaccess as you want, then check image url in browser url bar (with empty session). That should work!

根据您的总结，我建议您根据需要在配置文件或htaccess中设置静态文件夹路径（图像所在的位置），然后在浏览器URL栏中检查图像URL（使用空会话）。这应该工作！

#4

First I would suggest that you first try to find ways to narrow the redirects. If it possible I would suggest that it would be much more advisable to try to create your content dynamically based on your users authentication using languages like PHP or ASP (just to name two).

首先，我建议您首先尝试找到缩小重定向的方法。如果可能的话，我建议尝试使用PHP或ASP等语言（仅举两个例子）基于用户身份验证动态创建内容。

The classic way of disabling the caching on a webpage is to set two <meta> tags inside of your <head> </head> tags. However, you should note that these are technically not "correct" as they are not part of any of the "offical" standards documentation. This also means that I would again lean towards my first suggestion of finding a better delivery system which in turn should prevent the problem.

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

So for "testing" purposes the tags would be:

因此，为了“测试”目的，标签将是：

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

#5

Maybe I don't understand your question or dilemma (maybe because of lack of explanation or because I can't see your page at that link since I run Chrome), but there's an example I ran across here that works in Chrome by just using Javascript/jQuery to load, instead of CSS:

也许我不理解你的问题或困境（也许是因为我没有解释或因为我在运行Chrome时无法在该链接上看到你的页面），但是我在这里运行的一个例子只是在Chrome中运行加载Javascript / jQuery而不是CSS：

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

Use image at URL: http://www.w3schools.com/cssref/img_tree.gif

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

And although the accepted answer didn't work for me in Chrome, this is the question I got the jsFiddle above, from:

虽然接受的答案在Chrome中对我不起作用，但这是我上面提到的jsFiddle的问题，来自：

Load Image from javascript

从javascript加载图片

All the caching, etc. is unnecessary, and even something you wouldn't want to do if your images are ever updated to something else - they won't appear without forcing a refresh which you can only do through altering the file name like this to avoid users not seeing your updated image:

所有的缓存等都是不必要的，如果你的图像被更新到其他东西，你甚至不想做的事情 - 如果不强制刷新就不会出现这种情况，只能通过改变文件名这样做为避免用户看不到您更新的图片：

myPic.jpg?MMDDYYYY

And you could set the date according to the date you are modifying it.

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

#6

clean your browser history like cache,cookies clean the temporary internet file

清理浏览器历史记录，如缓存，cookie清理临时Internet文件

if problem not solved then reinstall browser your problem is solved definitely

如果问题没有解决然后重新安装浏览器你的问题肯定解决了

#1