1. #1
    Sencha User
    Join Date
    Sep 2009
    Posts
    15
    Vote Rating
    0
    ido is on a distinguished road

      0  

    Red face startup screen

    startup screen


    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 )

  2. #2
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,361
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


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

  3. #3
    Ext User
    Join Date
    Aug 2010
    Posts
    1
    Vote Rating
    0
    Derek321 is on a distinguished road

      0  

    Default


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

  4. #4
    Sencha User
    Join Date
    Aug 2010
    Location
    Europa
    Posts
    216
    Vote Rating
    1
    kortovos is on a distinguished road

      0  

    Default


    Quote Originally Posted by jgarcia@tdg-i.com View Post
    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)

  5. #5
    Sencha User
    Join Date
    Sep 2009
    Posts
    15
    Vote Rating
    0
    ido is on a distinguished road

      0  

    Default


    Hi,

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

  6. #6
    Sencha User
    Join Date
    Aug 2010
    Location
    Europa
    Posts
    216
    Vote Rating
    1
    kortovos is on a distinguished road

      0  

    Default


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

  7. #7
    Sencha User
    Join Date
    Sep 2009
    Posts
    15
    Vote Rating
    0
    ido is on a distinguished road

      0  

    Default


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

  8. #8
    Touch Premium Member jeffcrilly's Avatar
    Join Date
    May 2008
    Posts
    89
    Vote Rating
    0
    jeffcrilly is on a distinguished road

      0  

    Default


    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

  9. #9
    Sencha User
    Join Date
    Nov 2010
    Posts
    11
    Vote Rating
    0
    toot1981 is on a distinguished road

      0  

    Default


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

  10. #10
    Sencha User
    Join Date
    Jul 2010
    Posts
    10
    Vote Rating
    0
    Dhi is on a distinguished road

      0  

    Default


    @jeffcrilly : great solution man

Similar Threads

  1. Killing white screen after splash screen load
    By dankhan in forum Sencha Touch 1.x: Discussion
    Replies: 34
    Last Post: 3 Sep 2013, 9:08 AM
  2. Startup images
    By mitchellsimoens in forum Sencha Touch 1.x: Discussion
    Replies: 3
    Last Post: 7 Oct 2010, 4:14 AM
  3. Startup Screen - Sencha or Phonegap
    By ssdesign in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 24 Aug 2010, 3:50 PM
  4. How to improve Startup time?
    By profunctional in forum Sencha Touch 1.x: Discussion
    Replies: 3
    Last Post: 12 Jul 2010, 11:47 PM
  5. Ext Basic Startup
    By craigorymaas in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 23 Sep 2009, 6:28 AM

Thread Participants: 10