第一次加载时未显示DIV背景图像。仅在首次使用Chrome在FB上加载应用时才会发生

Question

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

有问题的应用 Rock Conquest

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

我只使用Chrome浏览过这个问题，只有在通过Facebook访问应用时才会发生这种情况。如果我直接转到应用程序（www.rockconquest.net），那么它可以正常工作。

如果我只是复制首页的页面源，然后将其粘贴到静态页面中，它可以正常工作而无需进行任何更改。

Answer 1

当您使用Facebook，Twitter或Github等大量使用ajax的网站时，通常会发生这种情况。

如果您使用Javascript显示背景图片，则应在几毫秒后尝试使用setTimeout加载它。

Answer 2

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

我不认为你使用JavaScript显示这些背景图像，因为帕特里克在他的回答中提到了（你为什么会这样做） - 但你可以尝试使用JavaScript进行“快速修复”/解决方法：

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

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

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

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