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

Question

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

1

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

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

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

Chris Carruthers 11 май 2018, в 14:00

Источник

0

Время загрузки страницы составляет от 0 до бесконечности. Хм ....
Lee Kowalkowski 11 май 2018, в 11:33
0

Это правда, через несколько секунд нужно будет включить простой тайм-аут ... не представляете, что это будет слишком сложно?
Chris Carruthers 11 май 2018, в 11:35
0

Почему бы не установить очень большой интервал для индикатора выполнения, тогда в $(window).load запустите функцию, чтобы быстро увеличить индикатор выполнения до 100% перед запуском любых других сценариев на странице?
sideroxylon 11 май 2018, в 12:03
0

@sideroxylon Хотя это еще или обходной путь, я чувствую, что это может быть лучшим решением!
Chris Carruthers 11 май 2018, в 12:05
0

Ага. Трудно время до бесконечности.
sideroxylon 11 май 2018, в 12:09

Показать ещё 3 комментария

Теги:

javascript

css

transition

1 ответ

Ещё вопросы

Время загрузки страницы составляет от 0 до бесконечности. Хм ....
Это правда, через несколько секунд нужно будет включить простой тайм-аут ... не представляете, что это будет слишком сложно?
Почему бы не установить очень большой интервал для индикатора выполнения, тогда в $(window).load запустите функцию, чтобы быстро увеличить индикатор выполнения до 100% перед запуском любых других сценариев на странице?
@sideroxylon Хотя это еще или обходной путь, я чувствую, что это может быть лучшим решением!
Ага. Трудно время до бесконечности.

Chris Carruthers · Answer 1 · 2018-05-11T11-32-00.000Z

Для тех, кто ищет это решение, как описано 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);
});

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