CSS 缓存背景图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8497855/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
cache background image
提问by enloz
Is there a way to "cache" background image.
有没有办法“缓存”背景图像。
For example.. Background image is 3x3px and it's set like this:
例如.. 背景图片是 3x3px，它的设置是这样的：
body {
background: #000 url(bg.png);
}
When refresh happens, background image "flickers" for second.
当刷新发生时，背景图像“闪烁”一秒钟。
Is there a cross-browser solution? (for Apache/PHP server if that is relevant)
有跨浏览器的解决方案吗？（对于 Apache/PHP 服务器，如果相关的话）
If you go to seo.hr and browse navigation,... you can see what I'm trying to do.
如果您转到 seo.hr 并浏览导航，...您可以看到我正在尝试做什么。
http://www.seo.hr/usluge/izrada-stranica
http://www.seo.hr/usluge/izrada-stranica
回答by scottheckel
I think you need to determine first if the issue actually is a caching issue or if it's caused by the size of your image. You could use a program like Wireshark or Fiddler to do this, but to be honest it's overkill for your need and you probably already have a browser with developer tools.
我认为您需要首先确定问题实际上是缓存问题还是由图像大小引起的。您可以使用 Wireshark 或 Fiddler 之类的程序来执行此操作，但老实说，这对您的需求来说太过分了，而且您可能已经拥有带有开发人员工具的浏览器。
Here's how you determine where an image is coming from in Chrome (the other browsers are similar).
以下是您在 Chrome 中确定图像来自何处的方法（其他浏览器类似）。
- Open your developer tools and go to the "Network" tab.
- Find "bg.png" in the list of network requests and click on it's name. Below is an example of having selected a stack overflow image from this page.
- 打开您的开发人员工具并转到“网络”选项卡。
- 在网络请求列表中找到“bg.png”并单击它的名称。以下是从此页面选择堆栈溢出图像的示例。
Notice that it says status 200 (from cache). The browser didn't need to go out to the server and rerequire that resource. It used the cache. If that "from cache" text wasn't there it wasn't reusing cached resources.
请注意，它表示状态 200（来自缓存）。浏览器不需要去到服务器并重新请求该资源。它使用了缓存。如果“来自缓存”文本不存在，则不会重用缓存资源。
There is also the potential that you'll get a status code of 304. That means that the server said the image wasn't modified since the last request that you made. You do make the server trip in that case.
也有可能你会得到 304 的状态代码。这意味着服务器说自从你上次发出请求以来图像没有被修改。在这种情况下，您确实使服务器旅行。
Ok, so my image wasn't in cache... now what?
好的，所以我的图像不在缓存中......现在怎么办？
There are a few reasons that this could occur.
发生这种情况的原因有几个。
- You're request headers aren't set to tell the browser to cache the image (also found in that same "Headers" tab that you would have seen that Status Code if the browser actually went to the server for the image). You'll want to set
cache-controlandexpiresto something that makes sense for you. Cache headers can get a bit complicated you may want to browse through this caching tutorial document. - Is it SSL? If so not all browsers cache this but most modern browsers do. Set
cache-control: publicon these images (and also expires).
- 您的请求标头未设置为告诉浏览器缓存图像（也可以在相同的“标头”选项卡中找到，如果浏览器实际转到服务器获取图像，您会看到该状态代码）。你要设置
cache-control并expires到一些有意义的你。缓存头可能会变得有点复杂，您可能需要浏览此缓存教程文档。 - 是 SSL 吗？如果是这样，并非所有浏览器都会缓存它，但大多数现代浏览器都会缓存。
cache-control: public在这些图像上设置（并且也会过期）。
The real question here is how do you fix this? Unfortunately, that's entirely dependent on the server and/or the framework that you are using. As the OP is using Apache, they can find great documentation on the Apache module mod_expires to figure out how to tweak caching for their site.
这里真正的问题是你如何解决这个问题？不幸的是，这完全取决于您使用的服务器和/或框架。由于 OP 正在使用 Apache，他们可以在 Apache 模块 mod_expires 上找到很好的文档，以了解如何为他们的站点调整缓存。
回答by Guilherme Viebig
Yes!
是的！
You should decide whats more suitable for you, but at this time we have some methods, like:
您应该决定哪种更适合您，但此时我们有一些方法，例如：
- Pure HTML/CSS
- Javascript Only
- Mixed HTML/CSS/Javascript
- Using base64 to encode the image somewhere on the source code
- 纯 HTML/CSS
- 仅 Javascript
- 混合 HTML/CSS/Javascript
- 使用 base64 在源代码的某处对图像进行编码
At this point I recommend a mixed solution, using javascript. This will make it work on many browsers as possible.
在这一点上，我推荐使用 javascript 的混合解决方案。这将使其在尽可能多的浏览器上工作。
There is a good tutorial at: http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/
有一个很好的教程：http: //perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/
Having several images in one can take you a step beyond that, so check this sprites article: http://www.alistapart.com/articles/sprites/
将多个图像合二为一可以让您更进一步，因此请查看这篇 sprites 文章：http: //www.alistapart.com/articles/sprites/
回答by Martin
回答by Peled Roy
Make your tiled image much much larger, when the browser engine renders the page it has to multiply each tile to cover the entire width and length of your object, which results in bad performance with small tiles on large objects.
使您的平铺图像大得多，当浏览器引擎呈现页面时，它必须将每个平铺相乘以覆盖对象的整个宽度和长度，这会导致在大对象上使用小平铺时性能不佳。
Small tiles -> more repetitions -> slower performance
小块 -> 更多重复 -> 性能变慢
