Adding a splash screen to an Ember.js (mobile) application

1

I blogged today about adding a splash screen to an Ember app - here.

The relevant ember code is:

var App = Ember.Application.createWithMixins({
    LOG_TRANSITIONS: true,
    init: function () {
        this.deferReadiness();
        this._super();
    }
});

App.Router.map(function () {
    this.resource('splash');
    this.resource('main');
    this.resource('sub');
});

App.IndexRoute = Ember.Route.extend({
    redirect: function () {
        var seenSplash = $.cookie('seen-splash');
        if (!seenSplash) {
            $.cookie('seen-splash', "true");
            this.transitionTo('splash');
        } else {
            this.transitionTo('main');
        }
    }
});

App.SplashRoute = Ember.Route.extend({
    enter: function () {
        var widthOrHeight = $(window).height() > $(window).width() ? 'width' : 'height';
        $('#splash-content').find('img').css(widthOrHeight, '70%');
        $('#splash').fadeIn();

        Ember.run.later(this, function () {
            $('#splash').fadeOut().detach();
            this.transitionTo('main');
        }, 1500);
    }
});

App.MainController = Ember.Controller.extend({
    clearCookie: function () {
        $.cookie('seen-splash', null);
        console.log('cleared session cookie');
    }
});

App.advanceReadiness();

Posting here for someone who might find it useful. :smile:

4 Likes
2

Any reason why you added this as part of your ember app?

To me a splash screen would be a great thing to put as an <img> tag or a background to an element so that it will start loading before your javascript parses and executes… When your app is ready it would hide the img and show the app.

That way you’re not introducing artificial load times for your users.

3

Yeah, I understand this is not the real splash screen (which is a placeholder to let the app itself to load), but only a *pseudo-*splash, if you will, that is there just for the effect.

4

I’m going to archive this in favor of further discussion on the blog post. Thanks for writing this!