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

【问题标题】：DIV background images not showing on first load. Only happens when first loading app on FB using Chrome首次加载时未显示 DIV 背景图像。仅在首次使用 Chrome 在 FB 上加载应用程序时发生
【发布时间】：2012-07-21 17:30:14
【问题描述】：

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

相关应用： Rock Conquest

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

我只在使用 Chrome 时看到过这个问题，而且只有在通过 Facebook 访问应用程序时才会发生。如果我直接进入应用程序 (www.rockconquest.net)，它就可以正常工作。

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

【问题讨论】：

更新：到目前为止，我们已经添加了一个带有 onload 警报的 JS 预加载脚本。警报显示，但我们仍然没有显示图像。这是我们添加到头部的脚本： function OnImageLoaded (img) { alert ("图片已加载：" + img.src); } function PreloadImage (src) { var img = new Image (); img.onload = function () {OnImageLoaded (this)}; img.src = src; } PreloadImage("image1.png");
更新：尝试使用 setTimeout 和 setInterval 显式加载图像 $("#MyMainHeader").css("background-image", 'url(images/header-bg.jpg)') ;没用。
更新：图像终于出现了。我必须完全删除 CSS，只使用 JS 加载它们。

标签： css facebook image background chromium

【解决方案1】：

Chrome 的开发者工具显示，对您的两张背景图片的请求被“取消”了，但一眼看去，我无法告诉您原因。

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

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

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

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

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

【讨论】：

使用 JS 加载图像，并尝试使用带有 settimeout 和 setinterval 的 onload 处理程序，但没有任何效果。

【解决方案2】：

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

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

【讨论】：

使用 JS 加载图像，并尝试使用带有 settimeout 和 setinterval 的 onload 处理程序，但没有任何效果。