Chrome：JQuery动画； 仅在开发人员工具中选择后才似乎起作用

Question

I have some styled pages I need to get working. A loading bar is a part of the pages. The loading bar is to appear when the page is navigated away from (as the back end can take some time to respond). After appearing the loading bar then needs to 'load' whilst the visitor is awaiting the next page.

The code is working fine in IE, but has a strange bug in Chrome and Safari. After the loading bar 'appears', it fails to load except when the element is selected in Chrome's developer tools

Find the HTML CSS and JS below. Thanks in advance for any help given.

<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

It works fine in Google Chrome when I do this:

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

See it in action here .

You probably don't want to bind it to the $(document).ready event though but to the $(window).unload event, like this:

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

Answer 2

Right... I have managed to centre onto the problem/bug, here is my description of it:

As one may notice in the code above, I use a background image to represent the 'filler' in the loading bar. When I replace this background image with a background colour, the loading works!

I know the obvious argument... the link to the image was wrong; but it couldn't have been, as when the chrome developed tools were open the background image worked fine. The background image also worked fine when the function to show() the loading bar was removed (leaving the animate as the only function)

Weird - [well maybe not, but I can't explain it]

So to get around this problem I am going to use a colour instead of the background image... the difference is tiny anyway.