Phonegap 3 white flash after splash

7
votes

I know this has been asked (and answered) several times (Phonegap showing white screen after the splash screen - IOS, Phonegap 2.0 - on app launch a white screen flashes prior to my app loading, how to to kill the white flickering splashscreen at the start of phonegap iOS app?) but none of these solutions seem to be working for me. Maybe because I'm using Phonegap version 3?

I'm only loading Phonegap and jQuery 2.0.0 (other solutions deal with jQuery-mobile which I'm not using) and I'm only targeting iOS for deployment. I've got a splash image loading, then the app displays a white screen (duration varies - I'm guessing it's loading up the app perhaps?) then my index.html loads up my first screen. Here's my current head:

<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

    <link type="text/css" rel="stylesheet" href="css/main.css" />

    <title>My App</title>

    <script type="text/javascript" src="phonegap.js"></script>
    <script src="js/lib/jquery-2.0.0.min.js"></script>
    <script src="js/main.js"></script>      
</head>

I tried adding this to my config.xml (at the same folder level as index.html):

<preference name="backgroundColor" value="0x000000" />

but I still get the white screen flash. I also tried manually hiding/showing the splash with:

function onDeviceReady() {
    navigator.splashscreen.show();
}

but that didn't seem to have any effect at all. Anybody have any suggestions?

5
ioscordova
+1 I am having the same problem. Have you made any progress? – FlyingLemon
@FlyingLemon: I was able to resolve this through trial-and-error debugging. My steps are listed below. – Brian Flanagan

5 Answers

18
votes

I was finally able to eliminate the splash flash, but I had to use Cordova to do it. Here are the steps I took:

In Terminal:

cordova create ~/path/to/project “com.appname.app” “appName”
cd ~/path/to/project
cordova platform add ios
cordova build
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-splashscreen.git
cordova build

Use Finder to navigate to ~/path/to/project/platforms/ios/ and double-click projectname.xcodeproj to open the project in Xcode.

Next, I went in and edited the images. You could do it any number of ways. Here's what I did: In Xcode, navigate to Resources/splash/, right-click the image to change, select Show in Finder and use whatever tools you want to change the images.

Once finished, head back to Xcode and open the root-level config.xml (Still not sure why there are two config.xml files, but you want the one furthest out in the folder structure). Update the AutoHideSplashScreen property to

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

From the Xcode main menu, select Product > Clean and then Product > Build.

Worked for me repeatedly. I was able to then use the navigator.splashscreen.show() and navigator.splashscreen.hide() methods from my app (which didn't seem to be responding without going through all these steps).

Hope this helps!

4
votes

I have a problem with the plugins or some problem with phonegap so 

function onDeviceReady() {
    navigator.splashscreen.show();
}

doesn't work for me.

I fixed it by setting the webview alpha to 0 until it's loaded:

3 steps:

  1. in the file "CDVViewController.m" in method "-(void)createGapView" I added:
    self.webView.alpha=0;
  2. in the file "MainViewController.m" in method "-(void)WebViewDidFinishLoad:(UIWebView*)theWebView" I added: theVebView.alpha=1;
  3. in the file "MainController.xib" I changed the background to black (set it to any color you prefer).

Now instead of a white screen flash I have a black one until the content is fully loaded. good enough for me. (although not perfect)

hope this helps..

1
votes

try Add

<param name="onload" value="true" /> to your SplashScreen feature in config.xml.

0
votes

This worked for me using build.phonegap.com

Step 1: Added the Slashscreen plugin to your config.xml

<gap:plugin name="org.apache.cordova.splashscreen" version="0.2.7" />

Step 2: Update your config.xml with this preference.

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

Step 3: Added the plugin function call to your 'deviceready' event

<script>
  document.addEventListener("deviceready", onDeviceReady, false);
  function onDeviceReady() {
   navigator.splashscreen.hide()
  }
</script>
0
votes

After getting mad with the splash plugin, I find out this solution:

  1. in MainViewController.xib, add a UIImageView (imgView).
  2. put your splash image in it, set scale to fill.
  3. In MainViewController.m, override - (void)webViewDidFinishLoad:(UIWebView*)theWebView

  4. add these code after [super webViewDidFinishLoad:theWebView];

    [self.view sendSubviewToBack:imgView];

    imgView.hidden = YES;