缓存背景图片 [英] cache background image

问题描述

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

例如..背景图片为 3x3px，设置如下:

正文{背景:#000 网址(bg.png)；}

刷新时，背景图片会闪烁"一秒钟.

有跨浏览器的解决方案吗?(如果相关，适用于 Apache/PHP 服务器)

<小时>

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

.

是 SSL 吗?如果是这样，并非所有浏览器都会缓存它，但大多数现代浏览器都会缓存.在这些图像上设置 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/

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).

1. Open your developer tools and go to the "Network" tab.
2. 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.

1. 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 and expires to something that makes sense for you. Cache headers can get a bit complicated you may want to browse through this caching tutorial document.
2. 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屋！