CSS背景图像无法加载

Question

最近在Chrome浏览器中出现了一个非常奇怪的问题，就是当您第一次加载页面或使用无痕模式时，没有任何背景图片显示。但是，当您按下F5刷新页面后，所有背景图片都会加载。

当您检查CSS时，在CSS面板中显示图像URL，但是当您将鼠标悬停在URL上时，不会显示工具提示以预览图像。

即使在下载资源时也没有任何提及背景图片的内容。

然后您刷新页面，它就正常运行了，CSS URL的工具提示甚至显示了预览。

这个错误只是偶尔在第一次加载时随机发生，无法保证重现此错误。

值得注意的是，如果您在Chrome浏览器中取消选中并重新选中background-image属性，它将下载并显示图像。

我有一段解决此问题的jQuery代码，但您可以看到它并不是很优雅！

$('*').each(function(){
var bg = $(this).css('background-image');
$(this).css('background-image', 'none');
$(this).css('background-image', bg);

});

这在多个版本的Chrome浏览器中每个Windows实例都会发生。

有什么想法吗？谢谢！

你可能能在http://ensa.ac.uk上看到它发生。

这是一个视频演示@ http://youtu.be/oLTyhk5rXgE

- owenmelbz

---

未发现此类错误。请尝试在 Chrome 上按 Ctrl+Shift+Delete 清除缓存。 - Libin

@Libin 不好意思，这个 bug 还存在。虽然在 Firefox 中可以正常工作。 - Christian

@Libin 正如我之前提到的，这种情况发生在多台计算机上，这些计算机以前从未被缓存过，而且我还提到了无痕模式，它本来就没有缓存。 - owenmelbz

Answer 1

请注意。

问题已经得到解决。

这个问题是由于浏览器在最后下载所有CSS背景图片导致的。因此，如果你在它们下载完成之前刷新页面，当页面再次加载时它会从缓存中加载。但由于图片没有完全下载，它们不能正确显示。

- owenmelbz

---

在我的简单测试用例中它可以正常工作，但是在我正在开发的应用程序中仍然存在问题。在我看到这个问题的环境中，Chrome Dev Tools的“网络”选项卡显示即使包含背景图像的元素可见，该背景图像也不会加载。直到我使用Dev Tools（或您的黑客方法）取消选中/重新选中background-image样式属性后，Chrome才从服务器请求图像。这很烦人，因为jquery UI使用背景图像精灵，所以用户抱怨在Chrome中他们无法看到对话框中的关闭“X”按钮，直到他们将鼠标悬停在上面。 - nothingisnecessary

所以这是因为图片在显示时没有完全加载。但是你是如何解决的呢？ :) - user2335065

Answer 2

首先，修复这些问题：

backg1round-color: #c7dfe3;
backg1round-color: rgba(255,255,255,0.67);

如果images是一个子文件夹，则使用：

url('images/logo-bg2.jpg');

而不是

url('/images/logo-bg2.jpg');

in main.css

- Christian

---

图片位于根目录，因此httpdocs/index.php和httpdocs/images/。但是当我们有多个级别时，例如site.com/category/articles/entry/，images/就不够用了，我们不想依赖基本href，它的设计有其原因。另外，main.css在/style/中，因此无论如何都需要向上一级目录。谢谢。 - owenmelbz

Answer 3

试试这个。不过没有经过测试；

$('*').each(function(){
var bg = $(this).css('background');
$(this).css('background', 'none');
$(this).css('background', bg);
});

并在您的CSS中进行相关更改（例如，将background-image更改为background）。

或者尝试；

$('*').each(function(){
var bg = $(this).css('background-image');
$(this).css('background-image', 'none');
$(this).css('background-image','url(bg)'); // or try url("bg") i am confused :P
});

经过一些搜索和研究，我得出了一个结论;

我会用类来解决这个问题。为每个状态设置单独的CSS类，然后使用jQuery更改类即可。这将确保在设置类时所有图像都已下载并可用 - 这就是我认为Chrome失败的地方（可能所有WebKit浏览器都会这样做）。

- Alfred

---

这个很可能有效，但我已经发布过了？我正在寻找一个解决方法，而不是一个hacky的解决方案，特别是如果它在每个页面加载时都运行，那就不好了。我最理想的情况是知道为什么会发生这种情况。 - owenmelbz

可能是由于Chrome与jQuery不兼容。尝试使用不同版本的jQuery，包括完整和压缩版本。 - Alfred

这并不是重点。我可以用jQuery轻松解决它，事实上我已经解决了。但我想知道为什么会发生这种情况。 - owenmelbz

刚刚确认过，Firefox/IE7-10/Safari上运行得很好。因此并不一定是Webkit的问题，只是一个Chrome的问题。 - nothingisnecessary

事实上，我刚刚在运行Android的Chrome浏览器中（在我的Droid Bionic上...之前是在Windows 7 PC上测试）发现了同样的错误。当然，你的修复方法很好用，但是这太烦人了。 - nothingisnecessary

Answer 4

Change css class as:


#nav
{
    background-image: url(../images/logo-bg2.jpg);
    height: 180px;
}

- Ram

---

当你加载 http://website.com/page/page/page/page 时，CSS 将失败。 - owenmelbz

Answer 5

Owen，

我仍然在我正在工作的应用程序中看到这个问题。我知道这也是一个hacky的解决方案，但它比你发布的jquery解决方案稍微好一点。我只是在css包含后面抛出了一个基于时间的版本号，如下所示：

e.g. " rel="stylesheet" type="text/css" />

我知道这会导致css永远不被缓存，但我没有找到其他解决方案。

- user3023080

---

欢迎来到SO！您能否编辑您的答案，将HTML引用放入代码块中，因为它在这里没有正确显示？我尝试为您进行编辑，但更改是如此微小（基本上需要在“例如”和代码之间添加额外的空行），以至于SO不会让我保存它，除非我首先进行更大的更改。 - Derek