Как установить продолжительность анимации, чтобы соответствовать времени загрузки страницы на лету?

Question

Например, у меня есть предварительный загрузчик div, который скрыт с помощью addClass на $ (window) .load () - довольно рутинная вещь.

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

Проблема теперь в том, что я хочу, чтобы анимация выполнялась каждый раз, независимо от времени загрузки страницы. Как настроить продолжительность анимации в соответствии со временем загрузки страницы на лету?

Answer 1

Для тех, кто ищет это решение, как описано в Sideroxylon, было бы что-то вроде этого:

// Kick off animation with long duration on doc ready
$(document).ready(function() {
   $('#progress-bar > div').animate({'width':'100%'}, 40000);
});

// When the page has loaded clearQueue and stop the animation, 
// then resume with much shorter duration to complete

$(window).load(function() {
   $('#progress-bar > div').clearQueue().stop();
   $('#progress-bar > div').animate({'width':'100%'}, 500);
});

Надеюсь, это полезно!