iOS PhoneGap / Cordova – Splash screen control
[UPDATE: for Cordova 1.6.0 instructions see the last section]
Unfortunately a splash screen is still needed to hide the white flash that is visible just before the UIWebView loads its content. Previously before PhoneGap 1.0, you had no control over this – sometimes your content just takes an extra time to load and you want to control the duration of the splash screen.
There are two steps to enable this, firstly – in PhoneGap.plist (Cordova.plist in 1.6.0), change the value for “AutoHideSplashScreen” to false (by default it is true for legacy code). This will not hide the splash screen, and it will remain on screen indefinitely.
Next, in your code, you will have to explicitly hide the splash screen.
After the deviceready event has been fired, you can call this function anytime you are ready:
navigator.splashscreen.hide();
If you want to just delay hiding the splash screen for 2 seconds for example, you can do this in your deviceready event handler:
setTimeout(function() {
navigator.splashscreen.hide();
}, 2000);
Cordova 1.6.0 – the navigator.splashscreen interface has been removed pending cross-platform support. For now use these functions below:
// to hide cordova.exec(null, null, "SplashScreen", "hide", []) // to show cordova.exec(null, null, "SplashScreen", "show", [])
Shazron's Cordova (aka PhoneGap) Blog 
I did this with javascript and css having a very small size image to cover the screen before the content loads. Down side of that i couldnt use a high res image for the second splash image so i ended having a two separate splash svreens. This really helps. Thanks!
Kerim Incedayi
September 15, 2011 at 9:59 pm
Thank you so much for this! I have been looking and struggling for 2 solid days! Works perfectly! 🙂
Gemma
September 20, 2011 at 2:01 pm
Thanks! I have been trying to fix this for a long time!!
Andy
October 13, 2011 at 4:42 am
Thanks for your efforts on this important issue Shazron. But – this is not working for me.
I’m using phonegap-1.1.0 and xcode 4.2
Changing AutoHideSplashScreen” to No (false is not one of the available options) has no effect.
Bummer. Any advice?
Dr. Bob
October 27, 2011 at 9:29 pm
working great phonegap 1.2 thanks for sharing this 🙂
emile818
November 30, 2011 at 12:47 am
Thanks for the write up. It worked for me when I tried this script alone. But when I put it in my project code, I get a blank screen between splash screen hide & map display. Below is the code I have, please suggest how to eliminate the blank screen…
setTimeout(function(){
navigator.splashscreen.hide();
Ext.dispatch({
controller: HC.controllers.hcController,
action: ‘showMap’
});
console.log(‘after dispatch’);
}, 2000);
Is it like, every event in the setTimeout will delay for 2sec? Anybody came across similar issue, please advice.
msarath
January 30, 2012 at 5:55 am
Does this work for the new Cordova 1.5.0 build? I’ve turned the AutoHideSplashScreen to ‘NO’ and I’m using this code:
function onLoad() {
document.addEventListener(“deviceready”, onDeviceReady, false);
}
setTimeout(function() {
navigator.splashscreen.hide();
}, 2000);
I’ve tried putting the setTimeout function within a function, but to no avail. Like so:
function onLoad() {
document.addEventListener(“deviceready”, onDeviceReady, false);
}
function hideSplash() {
setTimeout(function() {
navigator.splashscreen.hide();
}, 2000);
}
But to no avail.
Anything wrong with my code?
Paul
April 1, 2012 at 7:54 pm
You can only call these functions in your deviceready handler, in this case, in the function onDeviceReady, which you do not define.
shazron
April 6, 2012 at 10:11 am
No matter where I place the code (and it’s set to execute after the WebView has finished loading), I’m getting an error, “TypeError: ‘undefined’ is not a function (evaluating ‘cordova.exec(null, null, “SplashScreen”, “hide”, [])’).
What’s missing to allow this function to be found? Any ideas are welcomed.
Using Cordova 1.6.1, XCode 4.3.2, Sencha Touch 2.
PaulO
May 3, 2012 at 12:26 pm
Hmm. Seems to work as advertised under Cordova 1.7.0, no other changes applied.
PaulO
May 9, 2012 at 9:17 am
cordova.exec(null, null, “SplashScreen”, “hide”, [])
what’s the [] array do?
Also:
I’ve noticed that on IOS 5/iPad the splash screen resizes or moves down to display the black status bar, before it hides… is there a way to stop that? Maybe my splash screen dimensions are incorrect: 1024 x 768
camdagr8
May 9, 2012 at 5:03 am
cordova.exec(null, null, “SplashScreen”, “hide”, [])
what’s the [] array do?
Also:
I’ve noticed that the splash screen resizes or moves down when the status bar displays. Is there a way to stop that from happening?
camdagr8
May 9, 2012 at 5:04 am
the array is an array of arguments (which there are none in this case).
It shouldn’t anymore with the latest code (fixed some time ago)
shazron
May 11, 2012 at 6:23 pm
Is anyone else having trouble w/this in 1.7?
bwags
May 21, 2012 at 3:11 pm
The two solutions don’t work for me. I use 1.7.
blackbook
June 22, 2012 at 11:05 am
Help… I’m new to Xcode & Cordova so please excuse me if this is a “basic” question.
I’m using Cordova 1.7 and Xcode 4.3.2.
I’ve got the splash screen appearing, but it never goes away.
I’ve tried using cordova.exec (as above) but it never seems to get triggered. As a test I purposely misspelled it as kordova and didn’t even get an error message.
What am I doing wrong?
What (& where) do I need to insert in my code to hide the splash screen after 2 seconds?
Thank you.
Rob
June 1, 2012 at 2:50 am
Try putting a (temporary) ‘alert(“n”)’ at a few critical points in your code, such as when you’re registering for deviceReady and when it gets called. As I recall, there was an issue in Cordova 1.6 with deviceReady not getting triggered, but I haven’t had any of those issues with 1.7. This can help you narrow it down, and either resolve the issue or better report what is and isn’t happening.
Of course, there are other “proper” debugging tools available, but there’s nothing like a simple alert to say what code is and isn’t getting hit. (If there’s an error in earlier code, later code won’t get executed.)
Paul O
June 7, 2012 at 8:52 am
Use this code to hide the splash screen after 2 seconds:
setTimeout(function() { cordova.exec(null, null, “SplashScreen”, “hide”, []); }, 2000);
Be sure, that cordova is already loaded, when you execute this code. Use the deviceready event handler for this check:
function onDeviceReady() {
setTimeout(function() { cordova.exec(null, null, “SplashScreen”, “hide”, []); }, 2000);
}
document.addEventListener(“deviceready”, onDeviceReady, false);
Cheers
Philipp
Philipp Schreiber
June 18, 2012 at 8:39 am
I use phonegap 1.9.0 ,when i call navigator.splashscreen.hide(); in onDeviceReady() , the log said ” 07-15 12:05:50.589: I/Web Console(3213): Error: SyntaxError: Unexpected token ‘ at file:///android_asset/www/cordova-1.9.0.js:1012
”
Is a bug in phonegap 1.9.0 ?
zengjunfeng
July 15, 2012 at 4:07 am
Don’t know, I only handle iOS in this case. File a bug at http://issues.apache.org/jira/browse/CB and tag it Android.
shazron
July 20, 2012 at 8:04 am
[…] y JavaScript, algo tendremos que hacer. Buscando información, me encontré con esta página “iOS PhoneGap / Cordova – Splash screen control” que indica como configurar iOS para que no esconda el splash una vez cargada la aplicación. […]
Crear splash de publicidad en PhoneGap / iOS | tar.mx
August 28, 2012 at 5:23 am
And what about having a full screen Splashscreen ? Is that possible underphonegap?
taito2000
September 7, 2012 at 8:04 am
How can i call these show/hide methods in Obj C from my onAppDidEnterBackground and onAppWillEnterForeground methods
sandeep
October 5, 2012 at 5:35 pm
I was able to do this and show/hide splash screen inCDViewController.m
– (void) onAppWillResignActive:(NSNotification*)notification
{
//NSLog(@”%@”,@”applicationWillResignActive”);
[self showSplashScreen];
[self.webView stringByEvaluatingJavaScriptFromString:@”cordova.fireDocumentEvent(‘resign’);”];
}
– (void) onAppWillEnterForeground:(NSNotification*)notification
{
//NSLog(@”%@”,@”applicationWillEnterForeground”);
self.imageView.hidden = YES;
self.activityView.hidden = YES;
[self.view.superview bringSubviewToFront:self.webView];
[self.webView stringByEvaluatingJavaScriptFromString:@”cordova.fireDocumentEvent(‘resume’);”];
}
sandeep
October 5, 2012 at 6:36 pm
Thanks! Yeah splashscreen support is not standardized yet
shazron
October 17, 2012 at 11:24 pm