Question

我们发现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或大多数浏览器只会假设图像不会经常更改（过期标题和所有内容）。 / p>

Answer 1

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

div#news {
  background: url(images/newsitem_background.jpg?v=00001) no-repeat;
  ...
}

Answer 2

为了避免此类问题，我看到网站管理员在其文件中添加版本号。因此，他们会加载site-look-124.css和newsitem_background-7.jpg.

不是一个糟糕的解决方案，恕我直言。

Answer 3

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

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

Answer 4

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

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

Answer 5

我知道这可能不是你想听到的，但是Firefox更有可能遵循标准，而IE正在做一些有些奇怪的事情（而你恰好依赖它;）。）。

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

Answer 6

这不会解决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似乎并没有缓存它们。如果你愿意的话，你也可以用图像做一些时髦的stuph。

Answer 7

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

当然这只是针对网页设计师的临时解决方案

Firefox或Safari不会重新加载样式表图像

7 个答案: