Как показать индикатор загрузки при загрузке приложения в первый раз

Мне нужно загрузить много файлов для одностраничного приложения AngularJs, например angular.js, jquery.js, bootstrap.js, bootstrap.css, some_plugins.js, my_main.js и других,

Потребуется некоторое время, чтобы загрузить все приложение, поэтому я хочу показать индикатор загрузки (например, spinner) на странице void, пока все файлы js и css не загрузятся, а затем покажут содержимое.

ОТВЕТЫ

Ответ 1

Для Angular Приложения используют Angular Панель загрузки. Похож на этот.

  • Будет применяться, когда запрос XHR выходит в angular
  • Можно указать, какой запрос не отображать значок загрузки
  • Отображается только тогда, когда запрос заставляет пользователя ждать
  • Может быть оформлен по вашему вкусу
  • Внедрен в сервисный модуль и просто работает

Ответ 2

Я использовал Pace.js ранее в унаследованном проекте, написанном почти полностью в Backbone.js, в котором ожидание всех зависимостей для решения было довольно болезненным.

Для начала почти не требуется настройка, поэтому, если вы ищете относительно простую библиотеку, я бы использовал ее.

Edit:

В Документах:

Включите темп .js и тему css по вашему выбору на своей странице (как можно раньше), и все готово!

Pace автоматически отслеживает ваши запросы ajax, задержку цикла событий, состояние готовности документа и элементы на вашей странице, чтобы решить прогресс. На навигации ajax он начнется снова!

Если вы используете AMD или Browserify, требуйте в pace.js и вызовите метод rate.start() как можно раньше в процессе загрузки.

Пример

<head>
  <script src="/pace/pace.js"></script>
  <link href="/pace/themes/pace-theme-barber-shop.css" rel="stylesheet" />
</head>