Emberjs "экран загрузки" в начале

Я не знаю, если вы еще не видели это демо-приложение: http://www.johnpapa.net/hottowel/, но как только вы его запустите, вы увидите действительно хороший экран загрузки начало, как и в любом крупном настольном приложении/игре.

Поэтому у меня не было возможности правильно пройти код, но я недавно начал работать с Emberjs, и у меня возникает ощущение, что загрузка всего js-кода для всего SPA, который я создаю, может быть в секунд.

Мой вопрос теперь, как бы такой экран загрузки был возможен с emberjs? Или был бы лучший способ сделать это? (Я почему-то не думаю, что requirejs будет решением, хотя я могу ошибаться)

Ответ 1

вы можете сделать что-то вроде этого:

App = Ember.Application.create({
  ready: function () {
    $("#loader").remove();
  }
});

в вашем теле вы установите что-то вроде этого

<img src="img/loading.gif" id="loader">

Ответ 2

Я хотел бы внести альтернативный ответ на этот вопрос. По умолчанию ready запускается, когда DOM готов, и после этого может потребоваться некоторое время для рендеринга вашего приложения, что приведет к (возможно) нескольким секундам пустой страницы. Для моего приложения наилучшим решением было использование didInsertElement on ApplicationView.

Пример:

App.ApplicationView = Ember.View.extend({
  didInsertElement: function() {
     $("#loading").remove();
  }
});

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

Ответ 3

Может быть, это мой ленивый способ делать что-то, но я просто решил это, добавив класс no-ember в мой div.loading, и в моем CSS я добавил

.ember-application .no-ember {
  display: none;
}

(Ember автоматически добавляет ember-application к body.)

Таким образом, вы также можете добавить анимацию CSS3 для перехода от экрана загрузки.

Ответ 4

Альтернативно для использования didInsertElement, willInsertElement является лучшим событием для выполнения удаления загрузочного div, так как он будет удален из тега body, прежде чем "шаблон приложения будет визуализирован внутри него и исключает эффект" мерцания "(если только использование абсолютного позиционирование загрузочного div).

Пример:

App.ApplicationView = Ember.View.extend({
  willInsertElement: function() {
      $("#loading").remove();
  }
});

Ответ 5

У Ember есть логика просмотра автоматной загрузки.

Просто установив App.LoadingView и его шаблон, Ember покажет это представление, пока приложение загрузится.

Эта функция, вероятно, изменится в следующей версии, в пользу функции вложенного маршрута загрузки, которая выглядит многообещающей. См. Ниже:

Проект документации

Предложение и обсуждение темы

Ответ 6

В Ember 2.0 больше нет слоя "Просмотр", но вы можете сделать то же самое с инициализаторами:

App.initializer({
  name: 'splash-screen-remover',
  initialize: function(application) {
    $('#loading').remove();
  },
});