css – 缓存背景图片

前端之家收集整理的这篇文章主要介绍了css – 缓存背景图片前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有没有办法“缓存”背景图像.

例如..
背景图片是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

解决方法

我认为您需要确定问题是否真的是缓存问题,或者是否由您的图像的大小引起.您可以使用像Wireshark或Fiddler这样的程序来做到这一点,但是老实说,这对你的需要来说太过分了,你可能已经有了开发工具的浏览器.

以下是确定图片来自Chrome的位置(其他浏览器是类似的).

>打开您的开发人员工具,然后转到“网络”标签.
>在网络请求列表中查找“bg.png”,然后点击它的名称.下面是从该页面选择一个堆栈溢出图像的示例.

请注意,它表示状态200(来自缓存).浏览器无需外出到服务器并重新启动该资源.它使用缓存.如果“从缓存”文本不存在,那么它不会重新使用缓存的资源.

您还可以获得状态代码为304的潜力.这意味着服务器表示自您上次发出的请求以来,该图像未被修改.在这种情况下,您会使服务器脱机.

好的,所以我的形象不在缓存…现在什么?

有几个原因可能会发生.

>您的请求标头未设置为告诉浏览器缓存图像(也可以在浏览器实际访问到图像的服务器的同一“标题”选项卡中看到状态代码).您将需要设置缓存控制并过期到您有用的内容.缓存头可能会有点复杂,你可能想浏览this caching tutorial document.
>是SSL吗?如果不是所有的浏览器都可以缓存这个但大多数现代浏览器.在这些图像上设置cache-control:public(也将到期).

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

猜你在找的CSS相关文章