6

我们发现 Firefox（至少 v3）和 Safari 不能正确缓存从 css 文件引用的图像。图像被缓存，但它们永远不会刷新，即使您在服务器上更改它们也是如此。一旦 Firefox 将图像放入缓存中，它就永远不会检查它是否已更改。

我们的 css 文件如下所示：

div#news {
  background: #FFFFFF url(images/newsitem_background.jpg) no-repeat;
  ...
}

问题是，如果我们现在更改 newsitem_background.jpg 图片，所有 Firefox 用户仍将获得旧图片，除非他们明确刷新页面。另一方面，IE 会检测到图像已更改并自动重新加载。

这是一个已知问题吗？任何解决方法？谢谢！

编辑：解决方案是不要按 F5。我可以做这个。但我们的客户只会访问我们的网站，并获得旧的、过时的图形。他们怎么知道他们需要按 F5？

我已经安装了 Firebug 并确认了我已经怀疑的内容：Firefox 甚至不尝试检索从 css 文件引用的图像，以查明它们是否已更改。当您按 F5 时，它会检查所有图像，并且 Web 服务器很好地响应 304，除了那些已更改的图像，它响应 200 OK。

那么，有没有办法促使 Firefox自动更新从 css 文件中引用的图像？当然，我不是唯一一个有这个问题的人吗？

EDIT2：我用localhost测试了这个，图像响应不包含任何缓存信息，它是：

Server  Microsoft-IIS/5.1
X-Powered-By    ASP.NET
Date    Tue, 14 Oct 2008 11:01:27 GMT
Content-Type    image/jpeg
Accept-Ranges   bytes
Last-Modified   Tue, 14 Oct 2008 11:00:43 GMT
Etag    "7ab3aa1aec2dc91:9f4"
Content-Length  61196

EDIT3：我做了更多的阅读，看起来它无法修复，因为 Firefox 或大多数浏览器只会假设图像不会经常更改（标题和所有内容都过期）。

4

7 回答 7

8

我只想在图像 url 中添加一个查询字符串值。我通常只是创建一个“版本号”并在每次图像更改时递增它：

div#news {
  background: url(images/newsitem_background.jpg?v=00001) no-repeat;
  ...
}
于 2008-10-14T12:25:50.020 回答
2

为了避免这样的问题，我看到网站管理员在他们的文件中添加了版本号。所以他们加载site-look-124.css和newsitem_background-7.jpg.

不错的解决方案，恕我直言。

于 2008-10-14T12:02:18.163 回答
1

验证您提供的图像上的 HTTP 标头以及 CSS 文件。

如果其中任何一个设置为缓存（或丢失），您会发现浏览器正在正确缓存文件。

于 2008-10-14T10:04:36.670 回答
0

尝试在单击重新加载（或按 ）时按住 SHIFT 键F5。

否则，请使用 Firebug 等工具检查 HTTP 请求/响应标头并观察控制缓存的标头值。我从来没有注意到这个问题。也许您的服务器正在返回 304 响应（未修改）。

于 2008-10-14T09:19:29.430 回答
0

我知道这可能不是您想听到的，但是 Firefox 更可能遵循标准而 IE 正在做一些有点奇怪的事情（而您只是碰巧依赖它；））。

缓存行为取决于与图像一起发送的缓存标头。如果您能够发布标题（或其中一张图片的 URL），那么我们将能够更具体地告诉您发生了什么。

于 2008-10-14T09:23:27.440 回答
0

这并不能解决 Firefox 不检查图像是否已过期的问题，但您可以采取以下措施确保您的客户看到正确的图像：

将 css 中的图像设置为返回图像的 PHP 或类似脚本：

div#news {
  background: #FFFFFF url(images/background.php?name=newsitem) no-repeat;
  ...
}

然后使用脚本返回图像”

<?php
$name = isset($_REQUEST['name']) ? $_REQUEST['name'] : false;
switch($name) {
    case 'newsitem':
        $filename = 'news_item_background.jpg';
    break;
    default:
        $filename = 'common_background.jpg';
    break;
}

header("Content-Type: image/jpeg");
header("Content-Transfer-Encoding: binary");
$fp = fopen($filename , "r");
if ($fp) fpassthru($fp);

我在我的家庭服务器上使用它来为我的一些页面随机返回背景图像，而 Firefox 似乎没有缓存这些。如果您愿意，您还可以对图像进行一些时髦的处理。

于 2008-10-14T12:22:16.050 回答
0

另一种快速解决方法（如果这主要发生在网页设计的中间）是在 Firefox 中查看实际的 css 页面，然后重新加载页面，然后当您返回网站时，浏览器将读取当前的 css 页面。

当然，这只是针对网页设计师的临时修复

于 2009-08-25T14:08:25.340 回答