Question

我有一些我需要工作的样式页面。加载栏是页面的一部分。当页面被导航离开时，将显示加载栏（因为后端可能需要一些时间来响应）。出现加载栏后，需要在访问者等待下一页时“加载”。

代码在IE中运行良好，但在Chrome和Safari中有一个奇怪的错误。加载栏“出现”后，在Chrome的开发者工具中选择元素时，除外无法加载

在下面找到HTML CSS和JS。提前感谢您提供的任何帮助。

<span id="loading-footer">
  <p class="loading-bar-text">Loading:</p>
  <div id="loading-bar"><div id="coloured-bar" style=""></div></div>
</span>

/*loading bar*/
#loading-footer { background-color: #444; height: 93px; margin-top: 27px; position:     absolute; width: 411px; display: none; border-radius: 4px; -moz-border-radius:4px; -webkit-border-radius:4px; }
#loading-footer .loading-bar-text { color: #CCCCCC; font-family: helvetica; font-weight: bold; margin: 10% 0 0 16%; width: 0; display: inline-block; }
#loading-footer #loading-bar { background-color: #151515; display: inline-block; height: 10px; margin: 0 0 -2px 75px; width: 201px; border:2px solid #394040; border-radius: 7px; -moz-border-radius:7px; -webkit-border-radius:7px; overflow: hidden; }
#coloured-bar { background: url('../images/loadingcolor.gif') left top; overflow: hidden; width: 1px; height: 10px; margin: 0 0 0 -5px; z-index: 200;}

window.onbeforeunload = function() {
  $("#loading-footer").stop().show('fast', function() {
    $("#coloured-bar").stop().animate({
      width: "250",
    },{queue:false,duration:5000});
  });
}

Answer 1

在我执行此操作时，它在Google Chrome中正常运行：

$(document).ready(function() {
  $("#loading-footer").stop().show('fast', function() {
    $("#coloured-bar").stop().animate({
      width: "250",
    },{queue:false,duration:5000});
  });
})

在行动here中查看。

你可能不想将它绑定到$(document).ready事件但是要绑定到$（window）.unload事件，如下所示：

$(window).unload(function() {
  $("#loading-footer").stop().show('fast', function() {
    $("#coloured-bar").stop().animate({
      width: "250",
    },{queue:false,duration:5000});
  });
})

Answer 2

是的......我已经成功解决了问题/错误，这是我对它的描述：

正如人们在上面的代码中所注意到的，我使用背景图像来表示加载栏中的“填充符”。当我用背景颜色替换这个背景图像时，加载工作！

我知道明显的争论......图像链接错误;但它不可能，因为当铬开发工具打开时，背景图像工作正常。当删除加载栏show()的功能时，背景图像也正常工作（将animate作为唯一功能）

很奇怪 - [好吧也许没有，但我无法解释]

因此，为了解决这个问题，我将使用一种颜色而不是背景图像......无论如何，差异很小。

Chrome：JQuery动画;仅在开发人员工具中选择时才起作用

2 个答案: