Реализовать визуальную панель загрузки с приложением backbone.js

При первой загрузке моего приложения backbone.js на загрузку шаблонов уходит целых 6 секунд пустого экрана. У нас есть немного раздувания библиотек javascript, и процесс сборки еще не идеален, но это отдельные проблемы.

Я использую backbone-шаблон с помощью require.js, и мне хотелось бы иметь загрузчик типа gmail, который будет отображаться, пока все ресурсы, данные, шаблоны загружаются и обрабатываются, чтобы у нас не было только пустой заготовки стр.

Есть ли способ сделать что-то подобное?

1 ответ

Решение

Я решил, что нужно включить анимированный GIF GIN в index.html:

<html>
  <!-- header with scripts etc -->
  <body>
    <img id="spinner" class="centered" src="/images/spinner.gif"></img>
  </body>
</html>

И когда все ресурсы были загружены, модели инициализированы и основной вид приложения готов к визуализации, я просто заменяю счетчик на содержимое:

var appView = new AppView().render();
$("img#spinner").replaceWith(appView.el);

Он не показывает прогресс как таковой, но позволяет пользователю узнать, происходит ли загрузка.

Может быть способ подключиться к событиям загрузки requirejs, но я не знаю ни одного. Если вы планируете минимизировать и объединить все ресурсы в один файл, это все равно будет менее полезно, поскольку невозможно очень точно отслеживать ход загрузки одного файла.

Другие вопросы по тегам