1. #1
    Sencha User
    Join Date
    Mar 2012
    Location
    Dallas/Fort Worth
    Posts
    60
    Vote Rating
    20
    jvalentino will become famous soon enough jvalentino will become famous soon enough

      0  

    Default Example: Customizing the Native Load Screens and Getting Rid of Blinking

    Example: Customizing the Native Load Screens and Getting Rid of Blinking


    Note that on iOS the order is
    • load screen (Sencha icon on the white background)
    • blue blinking dots
    • app's first screen
    On Android the order is
    • blue blinking dots
    • app's first screen
    This is what I do, which makes the load screen last until after the app is launched. This hides the blue blinking dots with the load screen image.

    Step 1: Download the Cordova splashscreen plugin and put it in your project
    Step 2: You must set the AutoHideSplashScreen property in config.xml for iOS to false
    Example config.xml content
    Code:
    ...
     <preference name="KeyboardDisplayRequiresUserAction" value="true" />
        <preference name="SuppressesIncrementalRendering" value="false" />
        <preference name="UIWebViewBounce" value="true" />
        <preference name="TopActivityIndicator" value="gray" />
        <preference name="EnableLocation" value="false" />
        <preference name="EnableViewportScale" value="false" />
        <preference name="AutoHideSplashScreen" value="false" />
        <preference name="ShowSplashScreenSpinner" value="true" />
        <preference name="MediaPlaybackRequiresUserAction" value="false" />
        <preference name="AllowInlineMediaPlayback" value="false" />
        <preference name="OpenAllWhitelistURLsInWebView" value="false" />
        <preference name="BackupWebStorage" value="cloud" />
        <preference name="fullscreen" value="true" />
        <preference name="webviewbounce" value="true" />
    ...

    Step 3: Add JavaScript code in WebContent/index.html that listens for when the device is ready, waits a second arbitrarily, and then turns off the splash screen manually

    Code:
    <script id="microloader" type="text/javascript" src=".sencha/app/microloader/development.js"></script>
    
    
    <!-- PUT THIS CODE UNDER THE MICROLOADER -->
    <script type="text/javascript" charset="utf-8">
    
    
            document.addEventListener('deviceready', function() {
    
    
                setTimeout(function() {
                  navigator.splashscreen.hide();
               }, 1000);
            });
    </script>
    To change the image used in for the load screen look for the locations listed in app.js:

    Code:
     startupImage: {
            '320x460': 'resources/startup/320x460.jpg',
            '640x920': 'resources/startup/640x920.png',
            '768x1004': 'resources/startup/768x1004.png',
            '748x1024': 'resources/startup/748x1024.png',
            '1536x2008': 'resources/startup/1536x2008.png',
            '1496x2048': 'resources/startup/1496x2048.png'
        },
    Reference: http://www.appfoundation.com/2014/07...cation-launch/

  2. #2
    Sencha - Support Team
    Join Date
    Oct 2011
    Posts
    3,978
    Vote Rating
    132
    fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all

      0  

    Default


    Thank you for your contribution.
    Get more personalized support via a support subscription.

    Want to learn Sencha Touch 2? Check out
    Sencha training
    Sencha Touch in Action

    Need more help with your app? Hire Sencha Services services@sencha.com

    When posting code, please use BBCode's CODE tags.

    Need to include a test case use:
    The official Sencha Fiddle

Thread Participants: 1

Tags for this Thread