高速缓存背景图像 [英] cache background image
问题描述
是否有缓存背景图片的方法。
例如..
背景图片是3x3px,设置如下:
body {
background:#000 url(bg.png);
}
当刷新发生时,背景图片闪烁
是否有跨浏览器解决方案? (对于Apache / PHP服务器,如果相关)
如果你去seo.hr并浏览导航,你可以看到我想做什么。
。
cache-control:public
(并过期)。这里真正的问题是你如何解决这个问题?不幸的是,这完全取决于您使用的服务器和/或框架。由于OP使用Apache,他们可以在Apache模块mod_expires上找到优秀文档找出如何调整其网站的缓存。
Is there a way to "cache" background image.
For example.. Background image is 3x3px and it's set like this:
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)
If you go to seo.hr and browse navigation,... you can see what I'm trying to do.
http://www.seo.hr/usluge/izrada-stranica
http://www.seo.hr/usluge/optimizacija-za-trazilice
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.
Here's how you determine where an image is coming from in Chrome (the other browsers are similar).
- 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.
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.
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.
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-control
andexpires
to 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: public
on these images (and also expires).
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.
这篇关于高速缓存背景图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!