Хром: JQuery одушевленный; работает только при выборе в инструментах разработчика

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

Правильно ... Мне удалось сосредоточиться на проблеме / ошибке, вот мое описание этого:

Как можно заметить в коде выше, я использую фоновое изображение для представления 'заполнителяв строке загрузки.Когда я заменяю это фоновое изображение цветом фона, загрузка работает!

Я знаю очевидный аргумент ... ссылка на изображение была неправильной;но этого не могло быть, так как когда инструменты, разработанные для Chrome, были открыты, фоновое изображение работало нормально.Фоновое изображение также работало нормально, когда была удалена функция show() полоса загрузки (оставив animate в качестве единственной функции)

Странно - [возможно, нет, но я не могу это объяснить]

Так что, чтобы обойти эту проблему, я собираюсь использовать цвет вместо фонового изображения ... разница в любом случае крошечная.

Answer 2

Хорошо работает в Google Chrome, когда я делаю это:

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

Смотрите это в действии здесь .

Возможно, вы не хотите связывать его с событием $(document).ready, но с событием $ (window) .unload, например:

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