Hiding splash screen in PhoneGap application
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:
- 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
false in your
<preference name="AutoHideSplashScreen" value="false"></preference>
document.addEventListener("deviceready", onDeviceReady, false);
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.
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.
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:
cordova.exec(null, null, "SplashScreen", "hide", )
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
hide() functions of
navigator.splashscreen object or
hide arguments of
- Stack Overflow: Remove splash screen manually in PhoneGap,
- Stack Overflow: Showing splash screen in PhoneGap/Cordova 1.5.0,
- Stack Overflow: Using AutoHideSplashScreen option with PhoneGap / Cordova application,
- Shazron’s Cordova Blog: iOS PhoneGap / Cordova – Splash screen control.