ember.js - emberjs 开头的“加载屏幕”

Question

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

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

我现在的问题是，如何使用 emberjs 实现这样的加载屏幕？还是有更好的方法来解决这个问题？（我不认为 requirejs 会是一个解决方案，虽然我可能是错的）

score 19 · Accepted Answer

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

例子：

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

请注意，Ember 还提供延迟应用程序准备就绪的功能，请参阅代码以获取更多信息。

score 15 · Accepted Answer

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

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

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

这样，您还可以添加 CSS3 动画以从加载屏幕过渡。

score 13 · Accepted Answer

你可以这样做：

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

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

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

score 6 · Accepted Answer

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

例子：

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

score 2 · Accepted Answer

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

通过简单地设置 App.LoadingView 及其模板，Ember 将在应用程序加载时显示该视图。

此功能可能会在下一个版本中更改，以支持看起来很有前途的嵌套加载路线功能。见下文：

score 1 · Accepted Answer

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

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

6 回答 6