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

这件事快把我逼疯了。我们正在开发的FB应用程序在显示背景图像时出现问题

有问题的应用程序：

问题： 首次使用Google Chrome加载应用程序时，主体和DIV class

main标题的背景图像不会显示。如果你刷新页面，它们就会出现。如果我打开元素检查器并取消选中，然后重新选中背景图像框，我也可以让它们显示出来。之后，它们将继续正常显示，直到您关闭Facebook/浏览器，然后重新登录

我只在Chrome上看到过这个问题，只有在通过Facebook访问应用程序时才会发生。如果我直接转到app（），那么它可以正常工作

如果我只是复制首页的页面源代码，然后将其粘贴到一个静态页面中，则无需进行任何更改即可正常工作。
当您使用大量使用ajax的Facebook、Twitter或Github等网站时，通常会发生这种情况

如果您使用Javascript显示背景图像，您应该在几毫秒后尝试使用
setTimeout
加载它。
Chrome的开发工具显示，对两个背景图像的请求被“取消”，但快速浏览一下，我无法告诉您原因

我不认为您正在使用JavaScript显示这些背景图像，正如Patrick在回答中所说的那样（您为什么要这样做）–但您可以尝试使用JavaScript进行“快速修复”/解决方法：

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

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

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

这不会影响其他浏览器的性能，因为如果他们已经在第一次尝试时加载了图像，那么他们只会将其从缓存中拉出。
UPDATE：到目前为止，我们已经添加了一个带有onload警报的JS预加载脚本。警报显示，但我们仍无法显示图像。下面是我们添加到头部的脚本：函数OnImageLoaded（img）{alert（“图像已加载：+img.src”）；}函数preload image（src）{var img=new image（）；img.onload=function（）{OnImageLoaded（this）}；img.src=src；}preload image（“image1.png”）；更新：尝试使用setTimeout和setInterval以及$（“#MyMainHeader”）.css（“背景图像”，“url（images/header bg.jpg）”）显式加载图像；不起作用。更新：最终显示了图像。我必须完全删除CSS，只使用JS加载它们。使用JS加载图像，还尝试使用带有settimeout和setinterval的onload处理程序，但没有任何效果。使用JS加载图像，还尝试使用带有settimeout和setinterval的onload处理程序，但没有任何效果。