phonegap ios white screen after splash - how to avoid

Question

I am using phonegap 2.9.0 (iOS). I followed suggestions from this forum and set ... preference name="AutoHideSplashScreen" value="false" ... in config.xml and also added

    navigator.splashscreen.show();

in the deviceReady() function.

Still, I am seeing the white screen between splash and the remote web page load. The white screen duration varies - probably depending on network latency ??

How to avoid this intermediate white screen ?

Appreciate any help.

Answer 1

For [email protected] add this to config.hml

<preference name="scheme" value="app" />
<preference name="hostname" value="localhost" />

Answer 2

Use navigator.splashscreen.hide() in onDeviceReady(){}
In your config.xml first you specify not to hide the splashscreen automatically (you have already added this)

<preference name="auto-hide-splash-screen" value="false" />

Then when onDeviceReady() launches add a few seconds delay to navigator.splashscreen.hide()
So it will stay loaded for a few more seconds (2 seconds in this example) before it hides. This way it will overlap the white screen which would appear between the normal splash.hide() / onDeviceReady() and actually loading your main page of your app.

function onDeviceReady() {
    setTimeout(function() {
        navigator.splashscreen.hide();
    }, 2000);
}

So After WebView loads and before your code launces the splashscreen will be shown.