Как правильно установить статус бар загрузки страницы JS?

Question

[DMax921]

Здравствуйте друзья!
Подскажите, как правильно установить статус бар загрузки страницы как тут на тостере.
Нашел пример, работает классно, но линия процесса, стартует только после того как страница обновилась и начинает загрузку, а тут, линия процесса стартует сразу по нажатию f5.
Плюс, пример не реагирует на то, что страница еще не загрузилась и заканчивает свою работу раньше...

Вот пример работы
Вот файлы на GitHub
Заранее спасибо за помощь!

Comments

[WapSter]

toster если не ошибаюсь сделан по типу spa приложения по этому обновляется лишь содержимое, а не все приложение. Ваш же скрипт подойдет для того, чтобы подтянуть какой-то блок/страничку, вот и весь фокус.

[DMax921]

Тимур Турсунбаев, А скрипт с моего примера, он разве не должен подтягивать содержимое body?
Вроде он на него должен реагировать, типа, пока body полностью не загрузился - показываем линию процесса, загрузился - удаляем класс...
Но он почему-то не работает, а я не обладаю такими знаниями чтобы разобраться...

[WapSter]

DMax921, если никто не ответит, через несколько часов могу посмотреть работу скрипта. Не за компом

[DMax921]

Тимур Турсунбаев, Это было бы замечательно, спасибо ;)

[WapSter]

Как я и сказал скрипт используется для асинхронной загрузки странички, не более. Для обновления вы можете сделать имитацию, допустим прям в хед или после открывающегося тега боди страницы написать скрипт, который будет создавать блок, с нужными стилями прогресса допустим, что загрузка страницы произошла на 50%, в конце боди скрипт который уже будет запускать анимацию дальше уже до 100% и прятать полоску по завершению. Думаю на тостере для обновления и первоначальной загрузки так и сделано.

[DMax921]

Тимур Турсунбаев, Это для меня не то чтобы сложно, а не выполнимо. Я могу использовать только примеры, и то не всегда... Вы часом не знаете подобных примеров?

[WapSter]

DMax921, костыльный немного, без setTimeout почему-то изменения происходят мгновенно.

[DMax921]

Тимур Турсунбаев, Я так понимаю, ваш вариант это прогресс-бар сработает как только нажму f5 а потом должен мой сработать, верно?
У меня не получается установить ваш вариант, что-то он не отображается
Нашел вот еще один вариант на github но скрипт какой-то громоздкий, видимо под все варианты сделан... Но прогресс-бар отображается до тех пор, пока идет загрузка, что и радует, но блин он увесистый(

[WapSter]

DMax921, ну если хотите по моему способу, придется додумывать самим) 12кб это не так много.

[DMax921]

Тимур Турсунбаев, Да не много, но хочется 2-3кб)))
Этот последний вариант, вроде работает хорошо, вы можете его глянуть, как он работает?

[WapSter]

DMax921, примерно по моему принципу, так как в документации обязательное условие добавлять скрипт в head, используйте его если он удовлетворяет всем вашим желаниям. Не смотрите на вес, он много функционален, что вам и нужно как я понял

[DMax921]

Тимур Турсунбаев, Спасибо, буду смотреть как работает уже на хостинге.
Хорошего вам вечера ;)