Question

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

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

Answer 1

正如我在上面评论的那样，你可以在页面渲染，加载数据等时显示一个微调器。例如，下面是一个Mixin，它显示了一个微调器，直到一个View渲染：

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
}

使用Ember.js模板加载延迟

1 个答案: