startup screen

**ido** · 23 Nov 2010 4:19 PM

Hi,

I've set a startup screen on my application but when it disappear i still have to watch a blank screen for about 5/6sec before my application shows up.

So, i'm wondering when in the code or what event make the startup screen disappear, and how can i reduce the life time of the following blank screen ?

(sorry for my bad english

)

**jay@moduscreate.com** · 23 Nov 2010 5:18 PM

How large is your application bootstrap?? I would work to trim it down. 5-6 seconds is a long time to wait.

**Derek321** · 24 Nov 2010 3:08 AM

I think that is heavy and overload screen shot that takes more time to load.

**kortovos** · 25 Nov 2010 12:11 AM

Originally Posted by jgarcia@tdg-i.com

How large is your application bootstrap?? I would work to trim it down. 5-6 seconds is a long time to wait.

Any suggestions on how to do that? (aside from the obvious things, like using sencha-touch.js instead of the debug version)

**ido** · 25 Nov 2010 12:30 AM

Hi,

@jgarcia : My js files are around 40/45Ko (without sencha.js)
@Derek321 : Do you mean my startup picture is too heavy ?

**kortovos** · 25 Nov 2010 12:39 AM

He probably means that your startup picture is too heavy/ to large (not in height and width, but in kilobyte)

**ido** · 25 Nov 2010 12:52 AM

Ok, but with a too heavy picture i would get a blank screen before the pic is displayed .. not after, am i wrong ?

**jeffcrilly** · 27 Nov 2010 9:25 PM

You can get rid of the "white" screen (which is displayed after the startup screen) by implementing a loading mask in your html...

I'm just getting started w/ some of this, but here's what I'm doing and it seems to work with sencha-touch...

In the index.html I add a div in the body..

HTML Code:

<div id="loading-mask"></div>

Note: within the div you can put the "Loading..." or whatever -- e.g. an animating image.

The "loading-mask" style would have a background image pattern.. e.g...

Code:

#loading-mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../resources/img/background_texture_grey.png);
    text-align: center;
}

After the loading-mask DIV I have the script elements for the application. (yes, I'm not putting the script in the <head>. My <head> only has css stylesheet <link>s.)

In my index.js, in the "Main.init()" function (which is called by onReady()), once all the app initialization is finished I remove the load mask with a fade animation...

Code:

        
if (Ext.get('loading-mask')) {
            var loadmask = Ext.get('loading-mask');
            Ext.Anim.run(loadmask, 'fade', {
                easing: 'out',
                duration: 500,
                after: function() {
                    Ext.get('loading-mask').remove();
                }
            });
        }

Seems to work. The smaller the texture the better. Of course, it sounds like you are launching from the iDevice's home screen (and not a web download), hence the image will be read (afaik) locally.

Btw, this is the same technique we use in Ext-JS desktop apps for the loading mask. Imo, the fade in is very elegant.

jeff

**toot1981** · 11 Feb 2011 7:58 AM

very nice solution! but somehow the fade-out animation doenst work in my case

**Dhi** · 8 Jul 2011 12:49 AM

@jeffcrilly : great solution man

startup screen

Thread Tools

Search Thread

Display

startup screen

startup screen

Similar Threads

Killing white screen after splash screen load

Startup images

Startup Screen - Sencha or Phonegap

How to improve Startup time?

Ext Basic Startup