emberjs "loading screen" am Anfang

Question

Ich weiß nicht, ob du diese Demo-App schon gesehen hast: http://www.johnpapa.net/hottowel/ aber sobald du es startest, siehst du einen wirklich schönen Ladebildschirm am Anfang wie in jedem größeren Desktop-Anwendung/Spiel.

So hatte ich nicht die Chance, den Code selbst richtig durchzugehen, aber ich habe kürzlich mit Emberjs angefangen und ich habe das Gefühl, dass ich den ganzen js-Code für das ganze SPA laden könnte der Sekundenbereich.

Meine Frage jetzt, wie wäre solch ein Ladebildschirm mit Emberjs möglich? Oder wäre da ein besserer Weg? (Ich glaube irgendwie nicht requirejs eine Lösung wäre, wenn ich falsch sein könnte)

Answer 1

Sie etwas tun können:

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

in Ihrem Körper setzen Sie so etwas wie diese

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

Answer 2

Ich möchte eine alternative Antwort dazu beitragen. Standardmäßig wird ready ausgelöst, wenn das DOM bereit ist, und es kann einige Zeit dauern, Ihre Anwendung danach zu rendern, was (möglicherweise) einige Sekunden zu einer leeren Seite führt. Für meine Anwendung war die Verwendung der didInsertElement auf ApplicationView die beste Lösung.

Beispiel:

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

Bitte beachten Sie, dass Ember bietet auch die Möglichkeit, Anwendungsreife zu verschieben, siehe the code für weitere Informationen.

Answer 3

Vielleicht ist es meine faule Weise, Dinge zu tun, aber ich gelöst gerade dies durch Hinzufügen einer no-ember Klasse meiner div.loading und in meinem CSS habe ich

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

(Ember fügt automatisch die ember-application zum body.)

Auf diese Weise können Sie auch CSS3-Animationen hinzufügen, um vom Ladebildschirm wegzugehen.

Answer 4

Ember hat eine automatische Ladelogik.

Durch einfaches Festlegen von App.LoadingView und seiner Vorlage zeigt Ember diese Ansicht an, während die Anwendung geladen wird.

Diese Funktion wird sich wahrscheinlich in der nächsten Version zugunsten einer verschachtelten Loading-Route-Funktion ändern, die vielversprechend aussieht. Siehe unten:

Draft documentation

Feature proposal and discussion

Answer 5

Alternative didInsertElement zu verwenden, die willInsertElement ein besseres Ereignis ist die Laden div Entfernung durchzuführen, da es aus dem Body-Tag entfernt werden „bevor“ die Anwendungsvorlage ist gerendert darin und eliminiert den "Flimmereffekt" (es sei denn, es wird eine absolute Positionierung des Lade-Div verwendet).

Beispiel:

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

Answer 6

In Ember 2.0 gibt es nicht mehr View-Schicht, aber Sie können das gleiche mit initializers tun:

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