Question

我有一个div的网站，我将背景图像设置为随机图像：

<html>
<head>
  <style type="text/css">
    #bighead {width:100%;height:500px;text-align:center;background-repeat:no-repeat;}
    <?php
    $bgImages = array('main-bg-1.jpg','main-bg-2.jpg','main-bg-3.jpg','main-bg-3.jpg');
    print '#bighead {background-image:url('.$bgImages[array_rand($bgImages)].');}';
    ?>
  </style>
  <link rel="stylesheet" type="text/css" href="http://sstatic.net/stackoverflow/all.css?v=2e4402f4f417">
  <link rel="stylesheet" type="text/css" href="http://beta.images.theglobeandmail.com/bundle/gzip_106019672/css/site.v3.css" />
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>

<body>
  <div id="bighead">
    Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat.
  </div>
</body>

</html>

我在这里举办这个小例子：http://ryan.courtnage.ca/chrome-bg-bug/

每次重新加载页面时，都会得到一张随机的背景图片。这适用于所有浏览器，但Mac上的Chrome除外。

使用Mac上的Chrome，背景图片将显示正常，直到您刷新多次。在某一点上，某些背景图像将无法显示。这是间歇性的。

我认为它可能与浏览器的缓存有关。如果我清除Chrome的缓存并开始刷新页面，我会在Apache的访问日志中看到以下条目：

xx.xx.xxx.xxx - - [08/Mar/2011:19:53:40 +0000] "GET /chrome-bg-bug/main-bg-2.jpg HTTP/1.1" 200 31821
xx.xx.xxx.xxx - - [08/Mar/2011:19:53:52 +0000] "GET /chrome-bg-bug/main-bg-2.jpg HTTP/1.1" 304 -
xx.xx.xxx.xxx - - [08/Mar/2011:19:53:52 +0000] "GET /chrome-bg-bug/main-bg-2.jpg HTTP/1.1" 304 -
xx.xx.xxx.xxx - - [08/Mar/2011:19:54:06 +0000] "GET /chrome-bg-bug/main-bg-2.jpg HTTP/1.1" 304 -

200 OK返回＆amp;图像被发送到浏览器。背景图像似乎总是有效。
返回304 Not Modified。显示背景图像。
返回304 Not Modified。显示背景图像。
返回304 Not Modified。在这种情况下，背景图像不显示。

对main-bg-2.jpg的所有后续请求（导致304 Not Modified）将产生背景图像未显示的问题。

我在运行Google Chrome的多台Mac上重复了这个问题。我还应该提到另一个重点。当页面中包含相当大的样式表和/或js文件时，我似乎只能复制问题。所以在我上面的例子中，我正在从几个网站（stackoverflow＆amp; globaeandmail）加载jquery和样式表。它不需要是这些特定的文件，文件也不需要来自外部源（我最初遇到了所有样式表和放大器文件都是本地的问题）。

有没有人知道为什么会这样，以及我如何解决这个问题？

Answer 1

您可以随时尝试将？something 附加到CSS文件或图片，以便始终强制浏览器重新加载它。我会将PHP随机数组项更改为： $bgImages[array_rand($bgImages)] . '?' . rand()因此浏览器认为图像是动态的，不会对其进行缓存。您还可以设置Apache的缓存控制设置，但添加查询字符串会更容易一些，不会影响整个站点。

Answer 2

已经过了几年但我遇到了与Chrome＆amp; Safari本周。

我们希望在整个应用程序中为几个按钮添加“处理”状态，因此我们添加了一个新的CSS类，它只是将动画GIF应用为背景图像。我们需要确保在单击按钮之前缓存GIF，因此我们尝试了各种预加载技术。

最简单的解决方案是使用CSS内容属性，如下所述：http://www.thecssninja.com/css/even-better-image-preloading-with-css2

Chrome＆amp; Safari既是零星的 - 它们通常会将图像视为未缓存，即使我们强制预加载图像始终可见。在下载GIF并直接显示在按钮元素本身后，我们只能始终获得304 /未修改的响应。这导致动画通常永远不会出现给某些用户，因为应用程序会在再次下载GIF之前重定向到新页面。其他浏览器始终将图像视为缓存，并在单击时立即应用动画。

我们最后的解决方法是将GIF应用为按钮默认状态的背景图像，位于其边界之外。然后，“处理”状态只是将位置改回到按钮的边界内。

我觉得这与原始问题有关，只是想分担一些痛苦。

background-image不会间歇显示。 Mac上的谷歌浏览器

2 个答案: