Question

我最近在Chrome中遇到了一个非常奇怪的错误，就是当你第一次加载页面时，或者在隐身模式下没有任何背景图像显示。

当你然后F5页面时，背景图像全部加载。

当您检查css时，它会在css面板中显示图像网址，但是当您将鼠标悬停在网址上时，它不会显示带有图像预览的工具提示。

当您检查下载的资源时，甚至没有提及背景图像下载。

然后你刷新页面它工作正常，css网址的工具提示甚至显示预览。

该错误仅在偶尔首次加载时随机发生，无法保证重现此错误。

还值得注意的是，你取消它然后在chrome上重新调整background-image属性然后下载并显示图像。

我有一块jquery解决了这个问题，但是你可以看到它几乎没有优雅！

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

});

这种情况发生在多个版本的chrome中的每个窗口实例上。

任何想法都会很棒！三江源！

您可能会在http://ensa.ac.uk

上看到它

这是@ http://youtu.be/oLTyhk5rXgE

的视频演示

Answer 1

请注意。

问题已经解决了。

问题是浏览器最后下载了所有css背景图片。因此，如果在完成下载图像之前刷新页面，则当页面再次加载时，它将从缓存加载。但由于图像没有完全下载，因此无法正确显示。

Answer 2

首先，解决这些问题：

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

如果图片是子文件夹，请使用

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

而不是

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

在main.css中

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浏览器都会这样做）

Answer 4

Change css class as:


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

Answer 5

欧文，

我仍然在我正在处理的应用程序上看到这个问题。我知道这也是一个hacky解决方案，但它比你发布的jquery解决方案少了一些hacky。我只是在css include之后根据时间扔了一个版本号

e.g。 “rel =”stylesheet“type =”text / css“/＆gt;

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

CSS背景图像无法加载

5 个答案: