缓存背景图片

Question

有没有办法“缓存”背景图片。

例如.. 背景图片是3x3px，设置如下：

body {
    background: #000 url(bg.png);
}

刷新时，背景图像会“闪烁”一秒。

有跨浏览器的解决方案吗？（对于 Apache/PHP 服务器，如果相关的话）

如果您访问 seo.hr 并浏览导航，...您可以看到我正在尝试做什么。

Answer 1

我认为您需要首先确定问题是否确实是缓存问题，或者是否是由图像大小引起的。您可以使用 Wireshark 或 Fiddler 之类的程序来执行此操作，但说实话，这对于您的需求来说有点过分了，而且您可能已经拥有带有开发人员工具的浏览器。

以下是在 Chrome 中确定图像来自何处的方法（其他浏览器类似）。

Google Chrome Image Retrieved from Cache

请注意，它显示状态 200（来自缓存）。浏览器不需要访问服务器并重新请求该资源。它使用了缓存。如果“来自缓存”文本不存在，则不会重用缓存资源。

您还可能会收到 304 状态代码。这意味着服务器表示自您上次发出请求以来图像未曾修改。在这种情况下，你确实会导致服务器故障。

好的，所以我的图像不在缓存中...现在怎么办？

发生这种情况的原因有多种。

您的请求标头未设置为告诉浏览器缓存图像（也可以在同一个“标头”选项卡中找到，如果浏览器实际上访问服务器获取图像，您会看到该状态代码）。您需要将
```
cache-control
```
和
```
expires
```
设置为对您有意义的值。缓存标头可能会有点复杂，您可能需要浏览一下此缓存教程文档。
是SSL吗？如果是这样，并非所有浏览器都会缓存此内容，但大多数现代浏览器都会缓存。在这些图像上设置
```
cache-control: public
```
（也会过期）。

这里真正的问题是如何解决这个问题？不幸的是，这完全取决于您正在使用的服务器和/或框架。由于 OP 使用 Apache，他们可以找到有关 Apache 模块 mod_expires 的优秀文档，以了解如何调整其站点的缓存。

Answer 2

是的！

你应该决定什么更适合你，但此时我们有一些方法，例如：

此时我推荐使用 javascript 的混合解决方案。这将使其尽可能在多种浏览器上运行。

将多个图像合并在一起可以让您更进一步，因此请查看这篇精灵文章： http://www.alistapart.com/articles/sprites/

Answer 3

您可以尝试将图像编码为base64，然后将其直接放入CSS源代码中。我在here发现了一个关于利弊的问题。

Answer 4

使平铺图像变得更大，当浏览器引擎渲染页面时，它必须乘以每个平铺图像以覆盖对象的整个宽度和长度，这会导致大对象上的小平铺性能较差。

小瓷砖 -> 更多重复 -> 性能较慢

Answer 5

[在此处输入图像描述][1]