PDA

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



jvalentino
23 Jul 2014, 3:43 AM
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


The name of the plugin is org.apache.cordova.splashscreen
The current download location is https://github.com/apache/cordova-plugin-splashscreen
Step 2: You must set the AutoHideSplashScreen property in config.xml for iOS to false
Example config.xml content


...
<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



<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:



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/customizing-ios-android-sencha-touch-load-screen-getting-rid-blinking-application-launch/

fmoseley
24 Jul 2014, 4:40 PM
Thank you for your contribution.