Shazron's Cordova (aka PhoneGap) Blog

at Adobe Systems Inc.

iOS PhoneGap / Cordova – Splash screen control

with 25 comments

[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", [])
About these ads

Written by shazron

September 15, 2011 at 9:26 pm

Posted in cordova, phonegap

25 Responses

Subscribe to comments with RSS.

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

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

  3. Thanks! I have been trying to fix this for a long time!!

    Andy

    October 13, 2011 at 4:42 am

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

  5. working great phonegap 1.2 thanks for sharing this :)

    emile818

    November 30, 2011 at 12:47 am

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

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

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

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

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

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

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

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

  14. [...] 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. [...]

  15. And what about having a full screen Splashscreen ? Is that possible underphonegap?

    taito2000

    September 7, 2012 at 8:04 am

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


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 1,540 other followers

%d bloggers like this: