Chrome：刷新页面+ javascript重定向后未呈现背景图像

Question

我正在开发一个通过 ajax 加载页面的网站。我使用 #!/url 语法跟踪当前位置。如果在第一次加载页面时，该页面在 url 的哈希部分中已经有一个 url，我使用 javascript 重定向到该页面：

document.location = initialPage;

我的内容由一堆具有 position:absolute 的 div 组成，它们以正确的顺序堆叠以便显示。我的身体背景是一组使用 jQuery 幻灯片定期切换的图像。 这适用于所有浏览器，除了（这是问题）在 Chrome 中我有时会丢失我的内容 div 的背景图像。最可靠的重现方式是：

• 转到一个页面：例如http://epsilon.tabeoka.be/fr/gestiondeprojet
• 点击另一个页面的链接，例如“Offres d'emplois”，url现在变成http://epsilon.tabeoka.be/fr/gestiondeprojet#!/fr/offresdemplois
• 现在使用 Ctrl-F5 刷新
• 宾果游戏！

请注意，如果您现在再次使用 Ctrl-F5 刷新，页面将再次看起来正常。在任何一种情况下，都没有在页面加载时运行的重要 javascript。背景滚动已初始化，但在没有背景的页面（项目页面）上也存在问题。 我倾向于这是 Chrome 中的一个错误，但我需要这个工作。任何人都可以提出一些建议吗？

门诺

Answer 1

尝试在 CSS 上使用绝对路径作为背景。也许它可以帮助确定问题。

您也可以尝试在页面加载后将背景应用于块

$(document).ready{
  $("#content").css("background","url(../Images/Css/bg_content.png)");
}

也许这会有用。当我请求像http://epsilon.tabeoka.be/fr/contacts 这样的示例页面时。浏览器做了 41-42 个请求并上传了所有图像。当我按照您的方式进行时（按下 Ctrl-F5）- 浏览器仅完成 31-33 请求。他不上传图片作为背景。看起来他认为他们已经上传了。

所以当我禁用 chrome 上的缓存时 - 错误消失了。

也许您应该尝试将所有背景属性添加到您的页面中，而不是 CSS，并添加随机值，如下所示：

<style>
  #content {
    background:url(../Images/Css/bg_content.png?rnd=123124);
  }
</style>

Answer 2

如果它确实是 Chrome 错误（请参阅我对您的问题的评论），您可以尝试用 rgba 背景颜色替换您的背景图像。它更好，您可以为旧浏览器添加后备。

background-color: rgb(16,34,68);
background-color: rgba(16,34,68,.75);