Что посоветуете по созданию progressbar-а?

Идет загрузка файла через XMLHttpRequest с разбиением на части. Upload возвращает текущее событие по загрузке. Все вроде бы хорошо, но вот progressbar получается какой-то дерганный, особенно на небольших файлах. CSS-анимация никаких результатов не дала. JS-анимация, как я понимаю, заточена на динамическое изменение объекта от сель до сель, а вот в середину этого ничего не вставишь. И что делать? На что стоит обратить внимание?
  • Вопрос задан
  • 176 просмотров
Пригласить эксперта
Ответы на вопрос 1
Если вы заранее знаете количество частей (т.е. известно когда произойдет последний запрос), то:
1. Узнайте ширину прогресс-бара
var ProgressBarWidth = $('.ProgressBar').width();
2. Разделите на количество запросов:
var QtyRequest = 9;
var StepProgressBar = Math.round(ProgressBarWidth / QtyRequest);

3. Делайте анимацию с задержкой между запросами на прогресс-бар.
$('.ElementIntoProgressBar').animate({"width":StepProgressBar},750);


Даже при очень быстром выполнении запроса, анимации встанут в очередь и отработают положенное время (в приведенном примере 9*750 мс).

Кстати, можно рассчитывать время от запроса до ответа и на основе него принимать решение, какая будет скорость анимации (для быстрых запросов сократить время, для долгих увеличить).
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы