Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Phonegap 3 white flash after splash

Tags:

ios

cordova

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?

like image 703
Brian Flanagan Avatar asked Aug 02 '13 00:08

Brian Flanagan


3 Answers

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!

like image 119
Brian Flanagan Avatar answered Nov 11 '22 13:11

Brian Flanagan


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..

like image 33
NBApps Avatar answered Nov 11 '22 14:11

NBApps


try Add

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

like image 1
Hammer Avatar answered Nov 11 '22 14:11

Hammer