3

我最近在 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 中的每个窗口实例上。

任何想法都会很棒！谢谢你！

您也许可以在http://ensa.ac.uk上看到它的发生

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

4

5 回答 5

2

只是要注意。

问题已经解决了。

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

于 2013-03-21T14:10:14.777 回答
0

首先，修复这些：

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

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

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

代替

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

在 main.css

于 2012-09-01T12:37:45.910 回答
0

试试这个。虽然没有测试；

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

并在您的 CSS 中进行相关更改（即background-imageto ）。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 浏览器都会这样做）

于 2012-09-01T13:09:25.020 回答
0 
Change css class as:


#nav
{
    background-image: url(../images/logo-bg2.jpg);
    height: 180px;
}
于 2012-09-01T13:34:27.433 回答
0

欧文，

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

例如“ rel="stylesheet" type="text/css" />

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

于 2013-11-22T19:32:30.527 回答