ember.js - Ember.js 的模板加载延迟

Question

我正在开发一个使用 Ember.js 和 Handlebars.js 的应用程序。我注意到页面首次加载时显示模板可能会有一点延迟。这是有道理的，因为 javascript 必须创建 HTML。当页面第一次加载它看起来像一个空白页面已经加载，然后突然一切都出现了。

老实说，这是一个我可以忍受的问题，但对我来说仍然有点尴尬。我可能只是过度分析了一些事情，但有没有其他人注意到这一点，是否有人建议如何使页面加载看起来更“自然”？

Answer 1

正如我在上面评论的那样，您可以在页面呈现、加载数据等时显示微调器。例如，下面是一个 Mixin，它在视图呈现之前显示微调器：

App.ShowSpinnerWhileRendering = Ember.Mixin.create({
  layout: Ember.Handlebars.compile('<div class="loading">{{ yield }}</div>'),

  classNameBindings: ['isLoaded'],

  didInsertElement: function() {
    this.set('isLoaded', true);
    this._super();
  }
});

在您想等待数据加载的情况下（假设您使用路由器显示视图）：

App.ShowSpinnerWhileRendering = Ember.Mixin.create({
  layout: Ember.Handlebars.compile('<div class="loading">{{ yield }}</div>'),

  classNameBindings: ['isLoaded'],

  isLoaded: function() {
    return this.get('isInserted') && this.get('controller.isLoaded');
  }.property('isInserted', 'controller.isLoaded'),

  didInsertElement: function() {
    this.set('inserted', true);
    this._super();
  }
});

并将其混合到您的视图中：

App.ApplicationView = Ember.View.extend(App.ShowSpinnerWhileRendering, {
 // ...
});

然后定义一些 CSS 规则以在具有showSpinner类的元素上显示加载微调器（或其他东西），并在它也有isLoaded类时隐藏它：

.loading{
  background-image: url("spinner.png") 
  background-color: #DFDFDF
}

.is-loaded .loading {
  /* back to default styling, e.g. */
  background-image: none
  background-color: white
}