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 应该最终显示它们。

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