Phonegap application hides splashscreen too quickly

Question

I am developing a multi-platform Phonegap app and using the Phonegap Build service to build it and load it onto devices. I have followed documentation and searched extensively online but am still having trouble with the splashscreen. The app starts and displays the splashscreen for about 1 second, then there is a white flash, and occasionally there is also a flash of unstyled html before the page has loaded properly. I am trying to make the splashscreen last about 4 seconds and then show the initial page correctly without these annoying flashes - they have such a negative effect on the user experience and make it really feel unlike a mobile app. I cant get any of the suggested elements of the config.xml file to work to specify splashscreen delay.

I have tested this on iPad 2, iPhone 4s and the newest Google Nexus and all 3 devices have this problem, iPhone being the slowest and the Nexus showing a very fast flash but still a flash nonetheless.

I am using the latest version Phonegap Build, and jQuery mobile for the UI and page transitions so am wondering if that is anything to do with it.

Any help is much appreciated!

Answer 1

You can try with this in the config.xml

<preference name="SplashScreen" value="splash" />
<preference name="SplashScreenDelay" value="10000" />
<preference name="AutoHideSplashScreen" value="false" />

and when you want to hide, in the .js file

navigator.splashscreen.hide();

Answer 2

Just to add to what others have placed here, yes put the following in your config.xml,

<preference name="SplashScreen" value="splash" />
<preference name="SplashScreenDelay" value="10000" />
<preference name="AutoHideSplashScreen" value="false" />

and call

navigator.splashscreen.hide();

when you are ready to hide your splashscreen. But be sure you have added the splashscreen plugin:

cordova plugin add cordova-plugin-splashscreen

as the splash screen will show (on iOS at least, not 100% sure if splashscreen works without the plugin on other platforms) without it, but you can't control the duration, or the hiding of it without the plugin.

Answer 3

Try this for android:

SplashScreenDelay (number in milliseconds, defaults to 3000): The amount of time the splash screen image displays.

<preference name="SplashScreenDelay" value="10000"/> 

Set this <preference> inside res--> xml -->config.xml file.

Source Link here.

Answer 4

You can solve this by deferring the

navigator.splashscreen.hide();

until a few animation frames into the apps life (although this depends on what your startup/render situation is like)

if youre using fastdom, the below will probably do, although you may need a larger defer depending on your use case

fastdom.defer(2, function () {
    navigator.splashscreen.hide();
});