缓存背景图片

Question

有没有办法"缓存"背景图像.

例如..背景图像是3x3px,它的设置如下:

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

当刷新发生时,背景图像"闪烁"为秒.

是否有跨浏览器解决方案？(对于Apache/PHP服务器,如果相关)

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

Answer 1

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

以下是确定Chrome中图像来源的方式(其他浏览器类似).

从缓存中检索到Google Chrome图像

请注意,它表示状态200(来自缓存).浏览器不需要去服务器并重新获取该资源.它使用了缓存.如果"缓存"文本不存在,则不会重用缓存资源.

您还可能获得304的状态代码.这意味着服务器表示自您上次发出请求后图像未被修改.在这种情况下,您确实使服务器脱扣.

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

这可能发生的原因有几个.

您的请求标头未设置为告诉浏览器缓存图像(也可以在相同的"标题"选项卡中找到,如果浏览器实际进入服务器以获取图像,您将看到该状态代码).你想要设置cache-control和expires对你有意义的东西.缓存标头可能会有点复杂,您可能希望浏览此缓存教程文档.
是SSL吗？如果是这样,并非所有浏览器都缓存这个,但大多数现代浏设置cache-control: public在这些图像上(也会过期).

这里真正的问题是你如何解决这个问题？不幸的是,这完全取决于您使用的服务器和/或框架.由于OP正在使用Apache,他们可以在Apache模块mod_expires上找到很好的文档,以找出如何调整其站点的缓存.

Answer 2

是的!

您应该决定什么更适合您,但此时我们有一些方法,例如:

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

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