Chrome:刷新页面+ javascript重定向后未呈现背景图片 [英] Chrome: background-images not rendered after refreshing page + javascript redirect

问题描述

我在一个通过ajax加载页面的网站上工作.我使用#！/url语法跟踪当前位置.如果在页面首次加载时该页面在URL的哈希部分中已经有一个URL，那么我将使用javascript重定向到该页面:

I'm working on a website that loads pages through ajax. I keep track of the current location using the #!/url syntax. If, when the page is firsty loaded, that page already has a url in the hash part of the url, I redirect to that page using javascript:

document.location = initialPage;

我的内容由一堆具有position:absolute的div组成，这些div以正确的顺序堆叠以进行显示.我的身体背景是一组使用jQuery幻灯片定期切换的图像. 这在所有浏览器中都适用，但Chrome除外(这是问题所在)，有时我会丢失内容div的背景图片.最可靠的复制方式是:

My content consists of a bunch of divs with position:absolute that are stacked in the correct order for display. My body background is a set of images that are periodically switched using jQuery slide. This works in all browsers, except (and here's the problem) in Chrome I sometimes lose the background images of my content divs. The most reliable way to reproduce is:

• 转到页面:例如 http://epsilon.tabeoka.be/fr/gestiondeprojet
• 单击指向另一个页面的链接，例如"Offres d'emplois"，网址现在变为

• Go to a page: eg http://epsilon.tabeoka.be/fr/gestiondeprojet
• Click a link to another page, eg "Offres d'emplois", url now becomes http://epsilon.tabeoka.be/fr/gestiondeprojet#!/fr/offresdemplois
• Now refresh using Ctrl-F5
• Bingo!

请注意，如果现在再次使用Ctrl-F5刷新，页面将再次正常显示.在任何一种情况下，页面加载都不会运行任何重要的javascript.初始化了背景滚动，但是问题也存在于没有背景的页面(项目页面)上. 我倾向于将其作为Chrome中的错误，但我需要此工作.有人可以建议吗?

Notice that if you now refresh using Ctrl-F5 again, the page will look fine again. There is no significant javascript that runs on page load in either case. The background scroll is initialized, but the problem exists on pages without the backgrounds as well (the project pages). I'm leaning towards this being a bug in Chrome, but I need this working. Can anyone suggest something?

门诺

推荐答案

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

Try to use absolute path for backgrounds on the CSS. Maybe it can help to determine the problem.

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

Also you can try to apply backgrounds to blocks after page loading

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

也许这将是有用的.当我请求 http://epsilon.tabeoka.be/fr/contacts 之类的示例页面时.浏览器执行了41-42个请求，并上传了所有图像.当我按自己的方式操作时(按住Ctrl-F5键)-浏览器仅完成了31-33个请求.他不上传图像作为背景.看起来他认为他们已经上传了.

Also maybe this will be usefull. When i request sample page like http://epsilon.tabeoka.be/fr/contacts. Browser did 41-42 requests and uploads all images. When i make it your way (with Ctrl-F5 pressed) - browser done only 31-33 request. He dont upload the images for backgrounds. Looks like he think that they allready uploaded.

因此，当我在Chrome上禁用缓存时，错误消失了.

也许您应该尝试将所有背景属性(而不是CSS)添加到页面中，并且还应向其中添加随机值，如下所示:

Maybe you should try to add all background attributes into your page instead of CSS and also add to it random value like this:

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

这篇关于Chrome:刷新页面+ javascript重定向后未呈现背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！