emberjs开头的"加载屏幕"

Question

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

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

我现在的问题是,使用emberjs这样的加载屏幕怎么样？或者有更好的方法去做吗？(我不知道怎么认为requirejs不是解决方案,尽管我可能错了)

Answer 1

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

例:

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

请注意,Ember还提供延迟应用程序准备情况的功能,请参阅代码以获取更多信息.

Answer 2

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

.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();
  }
});