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

Question

[Сергей Мурзин]

Идет загрузка файла через XMLHttpRequest с разбиением на части. Upload возвращает текущее событие по загрузке. Все вроде бы хорошо, но вот progressbar получается какой-то дерганный, особенно на небольших файлах. CSS-анимация никаких результатов не дала. JS-анимация, как я понимаю, заточена на динамическое изменение объекта от сель до сель, а вот в середину этого ничего не вставишь. И что делать? На что стоит обратить внимание?

Answer 1

[Антон Щербаков]

Если вы заранее знаете количество частей (т.е. известно когда произойдет последний запрос), то:
1. Узнайте ширину прогресс-бара
var ProgressBarWidth = $('.ProgressBar').width();
2. Разделите на количество запросов:

var QtyRequest = 9;
var StepProgressBar = Math.round(ProgressBarWidth / QtyRequest);

3. Делайте анимацию с задержкой между запросами на прогресс-бар.

$('.ElementIntoProgressBar').animate({"width":StepProgressBar},750);

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

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

Comments

[Сергей Мурзин]

Мысль очень здравая.
Сначала оговорюсь, что JQ не использую, так как это лишь библиотека, которая вобрала в себя выполнение основных задач разработчиков, а мне интересен сейчас именно javascript.

Как я вас понял. Можно использовать следующий алгоритм:
-> Запоминаем start_data — время начало отправки файла и/или начало анимации (можно прогресс сдвинуть на 1% в качестве того, что отправка файла началась).
-> При получения события upload об отправленных данных начинаем анимацию на период прошедший с момента отправки или с момента прошлой анимации.
-> По завершению анимации проверяем наличие новых данных от события upload (которые могут хранится в переменных) и начинаем новую анимацию на тот же период, если данных не было, то уведомляем об этом какую-либо переменную, а событие при получении и проверки этой переменной запускает новую анимацию.

Я правильно вас понял?

[Антон Щербаков]

Сергей Мурзин: В данном случае тогда я Вам посоветую плагины где идет расчет размера файла и уже переданных данных, так как вы работаете с upload.
stackoverflow.com/questions/21646626/file-uploads-...
www.sitepoint.com/html5-javascript-file-upload-pro...
И строить прогресс динамически, т.е. показывать пользователю сколько загружено данных.

Кстати, upload можно строить на натичном JS, на HTML5 или на флеше. Чаще всего применяется такая комбинация на сайтах.

[Сергей Мурзин]

Так все так и есть. Progressbar работает, но для меня это очень дёргано.
По факту обновления приходят где-то раз в секунду (по ощущениям, по факту не замерял) и с этим интервалом и он и обновляется, а хочется получить обновления раз в двадцать пятую секунды.