缓存背景图片

Question

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

例如...... 背景图像是3x3px，它的设置如下：

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

当刷新发生时，背景图像“闪烁”第二个。

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

---

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

http://www.seo.hr/

http://www.seo.hr/usluge/izrada-stranica

http://www.seo.hr/usluge/optimizacija-za-trazilice

Answer 1

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

以下是确定Chrome中图片来源的方式（其他浏览器类似）。

1. 打开开发人员工具，然后转到“网络”标签。
2. 在网络请求列表中找到“bg.png”并单击其名称。下面是从此页面中选择堆栈溢出图像的示例。



请注意，它表示状态200（来自缓存）。浏览器不需要去服务器并重新获取该资源。它使用了缓存。如果“缓存”文本不在那里，则不会重复使用缓存资源。

还有可能获得304的状态代码。这意味着服务器表示自上次请求以来图像未被修改。在这种情况下，你确实使服务器脱扣。

好的，所以我的图片不在缓存中...现在是什么？

出现这种情况有几个原因。

1. 您的请求标头未设置为告诉浏览器缓存图像（如果浏览器实际进入服务器以获取图像，您也会在相同的“标题”标签中找到该状态代码） 。您需要将cache-control和expires设置为对您有意义的内容。缓存标头可能会有点复杂，您可能希望浏览this caching tutorial document。
2. 是SSL吗？如果是这样，并非所有浏览器都缓存这个，但大多数现代浏在这些图片上设置cache-control: public（也会过期）。

这里真正的问题是你如何解决这个问题？不幸的是，这完全取决于您使用的服务器和/或框架。由于OP使用Apache，他们可以找到great documentation on the Apache module mod_expires to figure out how to tweak caching for their site。

Answer 2

是！

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

• 纯HTML / CSS
• 仅限Javascript
• 混合HTML / CSS / Javascript
• 使用base64在源代码的某处对图像进行编码

此时我推荐使用javascript的混合解决方案。这将使它在许多浏览器上工作。

有一个很好的教程： http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/

将多个图像合二为一，可以让您超越它，请查看此精灵文章：  http://www.alistapart.com/articles/sprites/

Answer 3

您可以尝试在base64中对图像进行编码，并将其直接放入CSS源代码中。我发现了一个关于here的优缺点的问题。

Answer 4

使您的平铺图像大得多，当浏览器引擎渲染页面时，它必须将每个图块相乘以覆盖对象的整个宽度和长度，这会导致大型对象上的小图块表现不佳。

小瓷砖 - ＆gt;更多重复 - ＆gt;性能较慢