Hiding splash screen in PhoneGap application

adminCordova0 Comment
3 min. reading

There are various things you have to consider, when developing a PhoneGap application, if you want to control when and how your application’s splash screen will be shown or hidden. This post summarizes all my knowledge in this area. Most information presented here are obvious to more experienced PhoneGap developers, so this post works more like memo to myself.

Things on showing splash screen were discussed in this post, so I won’t repeat them here.

In most cases your splash screen gets usually hidden to late or to early:

  • when you’re using just a pure JavaScript/CSS, it last too long on screen most times, thus making a bad user feeling,
  • it gets hidden to early, when you’re using some frameworks like jQuery Mobile, Bootstrap, Sencha Touch etc., and your users see not fully loaded application.

To solve this problem, you need to manually control, when your splash screen gets hidden.

First of all set AutoHideSplashScreen to false in your config.xml:

[code language=”xml”]
<preference name="AutoHideSplashScreen" value="false"></preference>
[/code]

Now, anywhere in your JavaScript code, include such code block:

[code language=”js”]
document.addEventListener("deviceready", onDeviceReady, false);

setTimeout(function()
{
navigator.splashscreen.hide();
}, 1000);
[/code]

First line (reference to deviceready event) is obligatory across all PhoneGap versions and supported mobile platforms. If you omit that, your code might be fired before destination device is ready, which will result in splash screen being displayed forever and no user access to your application.

function setTimeout is used to further delay of hiding splash screen, as it was observed that hiding splash screen immediatelly after device is ready may fail in some certain situations.

As for navigator.splashscreen.hide() note, that this approach was removed in PhoneGap versions 1.6.0 to 2.0.0 (1.8.0 for Android devices) due to not being fully cross-platform supported. In these versions you should use an alternate approach of:

[code language=”js”]
cordova.exec(null, null, "SplashScreen", "hide", [])
[/code]

You can have only one splash screen per each application. But, if your application loads quickly and only after load is doing some time consuming operations, you may consider converting splash screen into wait screen — i.e. hide it on load, and then display and hide it, when ever it is required, using either show() / hide() functions of navigator.splashscreen object or show / hide arguments of cordova.exec function.

Future reference:

Leave a Reply