CODEWITHSUNDEEP
androidiosjquery-mobilecordova
mbrookson
mbrookson

Reputation: 455

Phonegap application hides splashscreen too quickly

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!

Upvotes: 6

Views: 6953

Answers (5)

Kris Erickson
Kris Erickson

Reputation: 33844

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.

Upvotes: 3

Andrew Bullock
Andrew Bullock

Reputation: 37398

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();
});

Upvotes: 1

NEOLPAR
NEOLPAR

Reputation: 382

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();

Upvotes: 3

Siddharth_Vyas
Siddharth_Vyas

Reputation: 10100

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.

Upvotes: 2

Ravikiran
Ravikiran

Reputation: 1

Hi the solution that worked for me is to load a HTML locally from the WWW folder of the Build and call all my other pages from there. i ask you to check the compatibility of j Query with phonegap . pure java script is always recommended as they load faster with no library included.

Upvotes: 0

Related Questions