White screen flash after launch image using Phonegap

Question

After loading the launch image, I get a white screen before my application loads. I am using phonegap with xcode. I would like my app to load on my lauch image so that it follows the ios developer guidelines and provides a smooth looking launch. I think this white screen is a webview loading for my application. I would like for this webview to be clear. Any ideas on a fix for this problem or a workaround?

I have attempted the following code and it made no difference on my launch. This code is located in my MainViewController.m

-void (webViewDidFinishLoad:(UIWebView*) theWebView
{
theWebView.backgroundColor = [UIColor clearColor];
theWebView.opaque = NO;
 }

I have researched this a lot but I haven't found a solution.

Answer 1

I had faced the same problem too, try these 3 steps which I did to solve the issue:

1. set AutoHideSplashScreen to NO in your phonegap/cordova plist file

2. Add this line to your viewDidLoad method of CDVMainViewController.m

   self.useSplashScreen = YES;
   

3. Then add this code to onDeviceReady() method

   function onDeviceReady()
   {
   // do your thing!
   cordova.exec(null, null, "SplashScreen", "hide", []);  //On Cordova 1.6. 0
   }
   

Answer 2

You will have to overlay a ModalViewController that is faking the "Default.png" image after launch, overlay the view controller on top of the UIWebView, and show a UIActivityIndicator, so the user knows you are loading your app. Once the webpage is done, you can dismiss your view controller.

Hope this helps.

Answer 3

Have you thought about manually hiding the splash screen rather so that your page is ready before it disappears ?

window.setTimeout(function() { 
navigator.splashscreen.hide();
},1350);

And set AutoHideSplashScreen to NO in your phonegap/cordova plist file

Answer 4

I had a similar problem. I did not fix it in code, rather I fixed it in the UI Editor. The window itself that contains the uiwebview also has a background color in the properties. This can be set to the color of your choice to eliminate the flash of white. (I set mine to black.)

Answer 5

As of Cordova/Phonegap 3+, you need to set the preference in config.xml:

<preference name="AutoHideSplashScreen" value="false" />

You will also need the plugin:

cordova plugin add org.apache.cordova.splashscreen

Then,

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
  // depending on how many things you are rendering on your webview, you might want to add an artificial wait
  var SPLASH_SCREEN_DELAY = 500;
  setTimeout(function() {
    navigator.splashscreen.hide();
  }, SPLASH_SCREEN_DELAY);
}

Answer 6

I was facing the same issue, and after doing some research I found that this is being caused because the application requires some time to load all the required .css and .js files.

To overcome the issue we can use the splash screen and also delay its time, so that till all the required files are loaded, the end-user wont see a gibberish white screen instead our customized splash screen would be visible.

I solved it by referring the first and second part of the answer given by "ian". These are the steps that I followed.

Step 1: install the Cordova Splashscreen plugin.

cordova plugin add org.apache.cordova.splashscreen

Step 2: Set the Auto Hide Splash Screen Preference from config.xml file to false.

<preference name="AutoHideSplashScreen" value="false"/>

Step 3: Increase the splash screen delay time

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

Hope this helps some one :)