css - 首次加载时未显示 DIV 背景图像。仅在首次使用 Chrome 在 FB 上加载应用程序时发生

Question

这个让我发疯。我们正在开发的 FB 应用程序在显示背景图像时出现问题。

有问题的应用: Rock Conquest

问题:当您首次使用 Google Chrome 加载应用程序时，正文和 DIV 类 MainHeader 的背景图像不会显示。如果您刷新页面，它们就会显示出来。如果我打开元素检查器并取消选中然后重新选中背景图像框，我也可以让它们显示出来。之后它们将继续正常显示，直到您关闭 Facebook/浏览器然后重新登录。

我只在使用 Chrome 时看到过这个问题，并且只有在通过 Facebook 访问该应用程序时才会发生。如果我直接转到应用程序 ( www.rockconquest.net )，那么它工作正常。

如果我只是简单地复制首页的页面源代码，然后将其粘贴到静态页面中，则无需进行任何更改即可正常工作。

Answer 1

Chrome 的开发者工具显示对您的两张背景图片的请求被“取消”，但快速浏览一下我无法告诉您原因。

我不认为您使用 JavaScript 显示这些背景图像，正如帕特里克在他的回答中所怀疑的那样(您为什么会这样做)——但您可以尝试使用 JavaScript 进行“快速修复”/解决方法:

在页面加载时，生成两个新的 Img 对象并将它们的 src 属性设置为背景图片的 URL:

var whatever = new Img();
whatever.src = "…";

这可能让 Chrome 在它们加载后自动将它们显示在所需的位置——如果没有，那么您可以使用 Img 对象的 onload/oncomplete 处理程序来显式设置再次元素……我认为至少 Chrome 应该最终显示它们。

这应该不会影响其他浏览器的性能，因为如果他们已经在第一次尝试时成功加载图像，那么他们只会将它们从缓存中拉出。