模板加載延遲與Ember.js

Question

我正在使用Ember.js和Handlebars.js的應用程序。我注意到，頁面第一次加載時可能會有一些延遲顯示模板。這是有道理的，因爲JavaScript必須創建HTML。第一次加載頁面時看起來像是一個空白頁面已經加載，然後突然出現一切。老實說，這是一個我可以忍受的問題，但對我來說似乎仍然有點尷尬。我可能只是過分分析一些東西，但是有其他人注意到了這一點，並且有人建議如何讓頁面加載看起來更「自然」嗎？

Answer 1

正如我上面的評論，你可以顯示一個微調，而網頁顯示，數據加載等。作爲一個例子，下面是一個混合其中顯示了一個微調，直到查看已呈現：

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 
}