Question

我不知道，如果您已经看过这个演示应用程序：http://www.johnpapa.net/hottowel/但是一旦启动它，您会看到一个非常好的加载屏幕，就像您在任何更大的桌面应用程序/游戏中一样

所以我自己没有机会正确地完成代码，但最近我开始使用Emberjs，我觉得加载我正在构建的整个SPA的所有js代码都可以在秒区。

我现在的问题是，使用emberjs这样的加载屏幕怎么样？或者有更好的方法去做吗？（我不知道requirejs会不会是一个解决方案，虽然我可能错了）

Answer 1

我想为此提供替代答案。默认情况下，ready在DOM准备就绪时触发，并且在此之后渲染应用程序可能需要一些时间，从而导致（可能）几秒钟的空白页面。对于我的应用程序，在didInsertElement上使用ApplicationView是最佳解决方案。

示例：

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

请注意，Ember还提供延迟应用程序准备的功能，有关详细信息，请参阅the code。

Answer 2

也许这是我懒惰的做事方式，但我刚刚通过在我的no-ember添加div.loading课程来解决这个问题，并在我的CSS中添加了

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

（Ember自动将ember-application添加到body。）

这样，您还可以添加CSS3动画，以便从加载屏幕转换过来。

Answer 3

你可以这样做：

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

在你的身体里你设置了这样的东西

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

Answer 4

使用didInsertElement的替代方法，willInsertElement是执行加载div删除的更好事件，因为它将在“应用程序模板”内部呈现之前从body标签中删除，并消除“闪烁”效果（除非使用绝对值）加载div的定位）。

示例：

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

Answer 5

Ember有一个自动加载视图逻辑。

只需设置App.LoadingView及其模板，Ember将在应用程序加载时显示该视图。

此功能可能会在下一版本中发生变化，有利于嵌套加载路由功能，看起来很有前途。见下文：

Answer 6

在Ember 2.0中，不再有View层，但你可以对初始化器做同样的事情：

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