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?
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!
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:
"CDVViewController.m"
in method "-(void)createGapView
" I added:"MainViewController.m"
in method "-(void)WebViewDidFinishLoad:(UIWebView*)theWebView"
I added: theVebView.alpha=1;
"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..
try Add
<param name="onload" value="true" />
to your SplashScreen feature in config.xml.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With