Splash screen when starting the app

Question

I'm currently creating an app with apache cordova. I need to make splash screen to show up, when my app is launched. I've tried to search information from internet how to do so but without any good results.. I would like to add, that Im using JS, HTML and CSS (+XML).

Currently; I've installed extension - splash screen and my code in config.xml looks like following;

<?xml version="1.0" encoding="utf-8"?>
<widget xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:vs="http://schemas.microsoft.com/appx/2014/htmlapps" id="io.cordova.myapp741b74" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" defaultlocale="en-US">
  <name>MobiiliLukkari</name>
  <description>A blank project that uses Apache Cordova to help you build an app that targets multiple mobile platforms: Android, iOS, Windows, and Windows Phone.</description>
  <author href="http://cordova.io" email="dev@cordova.apache.org">Apache Cordova Team </author>
  <content src="index.html" />
  <access origin="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <vs:features />

  <preference name="SplashScreen"         value="screen"/>
  <preference name="SplashScreenDelay"    value="5000" />
  <feature name="SplashScreen">
    <param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen" />
    <param name="onload" value="true" />
  </feature>

  <preference name="windows-target-version" value="8.1" />
  <!-- Support for Cordova 5.0.0 plugin system -->
  <plugin name="cordova-plugin-whitelist" version="1" />
  <allow-intent href="http://*/*" />
  <allow-intent href="https://*/*" />
  <allow-intent href="tel:*" />
  <allow-intent href="sms:*" />
  <allow-intent href="mailto:*" />
  <allow-intent href="geo:*" />
  <platform name="android">
    <allow-intent href="market:*" />
  </platform>
  <platform name="ios">
    <allow-intent href="itms:*" />
    <allow-intent href="itms-apps:*" />
  </platform>



  <platform name="android">


    <icon src="res/icons/android/icon-36-ldpi.png" density="ldpi" />
    <icon src="res/icons/android/icon-48-mdpi.png" density="mdpi" />
    <icon src="res/icons/android/icon-72-hdpi.png" density="hdpi" />
    <icon src="res/icons/android/icon-96-xhdpi.png" density="xhdpi" />


  </platform>
  <platform name="ios">
    <!-- iOS 8.0+ -->
    <!-- iPhone 6 Plus  -->
    <icon src="res/icons/ios/icon-60-3x.png" width="180" height="180" />
    <!-- iOS 7.0+ -->
    <!-- iPhone / iPod Touch  -->
    <icon src="res/icons/ios/icon-60.png" width="60" height="60" />
    <icon src="res/icons/ios/icon-60-2x.png" width="120" height="120" />
    <!-- iPad -->
    <icon src="res/icons/ios/icon-76.png" width="76" height="76" />
    <icon src="res/icons/ios/icon-76-2x.png" width="152" height="152" />
    <!-- iOS 6.1 -->
    <!-- Spotlight Icon -->
    <icon src="res/icons/ios/icon-40.png" width="40" height="40" />
    <icon src="res/icons/ios/icon-40-2x.png" width="80" height="80" />
    <!-- iPhone / iPod Touch -->
    <icon src="res/icons/ios/icon-57.png" width="57" height="57" />
    <icon src="res/icons/ios/icon-57-2x.png" width="114" height="114" />
    <!-- iPad -->
    <icon src="res/icons/ios/icon-72.png" width="72" height="72" />
    <icon src="res/icons/ios/icon-72-2x.png" width="144" height="144" />
    <!-- iPhone Spotlight and Settings Icon -->
    <icon src="res/icons/ios/icon-small.png" width="29" height="29" />
    <icon src="res/icons/ios/icon-small-2x.png" width="58" height="58" />
    <!-- iPad Spotlight and Settings Icon -->
    <icon src="res/icons/ios/icon-50.png" width="50" height="50" />
    <icon src="res/icons/ios/icon-50-2x.png" width="100" height="100" />
  </platform>
  <platform name="windows">
    <icon src="res/icons/windows/Square150x150Logo.scale-100.png" width="150" height="150" />
    <icon src="res/icons/windows/Square150x150Logo.scale-240.png" width="360" height="360" />
    <icon src="res/icons/windows/Square30x30Logo.scale-100.png" width="30" height="30" />
    <icon src="res/icons/windows/Square310x310Logo.scale-100.png" width="310" height="310" />
    <icon src="res/icons/windows/Square44x44Logo.scale-100.png" width="44" height="44" />
    <icon src="res/icons/windows/Square44x44Logo.scale-240.png" width="106" height="106" />
    <icon src="res/icons/windows/Square70x70Logo.scale-100.png" width="70" height="70" />
    <icon src="res/icons/windows/Square71x71Logo.scale-100.png" width="71" height="71" />
    <icon src="res/icons/windows/Square71x71Logo.scale-240.png" width="170" height="170" />
    <icon src="res/icons/windows/StoreLogo.scale-100.png" width="50" height="50" />
    <icon src="res/icons/windows/StoreLogo.scale-240.png" width="120" height="120" />
    <icon src="res/icons/windows/Wide310x150Logo.scale-100.png" width="310" height="150" />
    <icon src="res/icons/windows/Wide310x150Logo.scale-240.png" width="744" height="360" />
  </platform>
  <platform name="wp8">
    <icon src="res/icons/wp8/ApplicationIcon.png" width="99" height="99" />
    <icon src="res/icons/wp8/Background.png" width="159" height="159" />
  </platform>
  <platform name="android">
    <splash src="res/screens/android/screen-hdpi-landscape.png" density="land-hdpi" />
    <splash src="res/screens/android/screen-ldpi-landscape.png" density="land-ldpi" />
    <splash src="res/screens/android/screen-mdpi-landscape.png" density="land-mdpi" />
    <splash src="res/screens/android/screen-xhdpi-landscape.png" density="land-xhdpi" />
    <splash src="res/screens/android/screen-hdpi-portrait.png" density="port-hdpi" />
    <splash src="res/screens/android/screen-ldpi-portrait.png" density="port-ldpi" />
    <splash src="res/screens/android/screen-mdpi-portrait.png" density="port-mdpi" />
    <splash src="res/screens/android/screen-xhdpi-portrait.png" density="port-xhdpi" />
  </platform>
  <platform name="ios">
    <splash src="res/screens/ios/screen-iphone-portrait.png" width="320" height="480" />
    <splash src="res/screens/ios/screen-iphone-portrait-2x.png" width="640" height="960" />
    <splash src="res/screens/ios/screen-ipad-portrait.png" width="768" height="1024" />
    <splash src="res/screens/ios/screen-ipad-portrait-2x.png" width="1536" height="2048" />
    <splash src="res/screens/ios/screen-ipad-landscape.png" width="1024" height="768" />
    <splash src="res/screens/ios/screen-ipad-landscape-2x.png" width="2048" height="1536" />
    <splash src="res/screens/ios/screen-iphone-568h-2x.png" width="640" height="1136" />
    <splash src="res/screens/ios/screen-iphone-portrait-667h.png" width="750" height="1334" />
    <splash src="res/screens/ios/screen-iphone-portrait-736h.png" width="1242" height="2208" />
    <splash src="res/screens/ios/screen-iphone-landscape-736h.png" width="2208" height="1242" />
  </platform>
  <platform name="windows">
    <splash src="res/screens/windows/SplashScreen.scale-100.png" width="620" height="300" />
    <splash src="res/screens/windows/SplashScreen.scale-240.png" width="1152" height="1920" />
    <splash src="res/screens/windows/SplashScreenPhone.scale-240.png" width="1152" height="1920" />
  </platform>
  <platform name="wp8">
    <splash src="res/screens/wp8/SplashScreenImage.png" width="768" height="1280" />
  </platform>
  <access origin="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" />
  <access origin="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
  <access origin="http://code.jquery.com/jquery-1.11..min.js" />
  <access origin="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js" />
  <access origin="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
  <access origin="https://ajax.microsoft.com/ajax/jQuery/jquery-3.1.1.min.js" />
  <access origin="http://code.jquery.com/jquery-1.4.5.min.js" />
  <access origin="http://code.jquery.com/jquery-migrate-1.2.1.min.js" />
  <access origin="http://code.jquery.com/ui/1.11.4/jquery-ui.js" />
  <access origin="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" />
  <access origin="https://mail.epedu.fi/owa/auth/logon.aspx?replaceCurrent=1&amp;url=https%3a%2f%2fmail.epedu.fi%2fowa%2f" />
  <access origin="https://wille.epedu.fi/" />
  <preference name="Orientation" value="portrait" />
  <preference name="Fullscreen" value="True" />
  <plugin name="cordova-plugin-splashscreen" version="3.1.0" />
</widget>

So, how should I work around this? How can I make the splash screen show up for a couple of seconds after the app is launched.

Answer 1

From my working project just check through my settings for both ios and Android. I read a project which helped to stop the Splash screen disappearing when my App had not finished loading, the settings below allow the splash screen to stay on until the Device is ready then it clears it. Works nicely.

<platform name="android">
    <allow-intent href="market:*" />
    <preference name="SplashScreen" value="screen" />
    <preference name="SplashScreenDelay" value="10000" />
    <preference name="SplashShowOnlyFirstTime" value="false" />
    <preference name="FadeSplashScreen" value="false" />
    <preference name="AutoHideSplashScreen" value="false" />
    <preference name="ShowSplashScreenSpinner" value="true" />
    <!-- 10000 to keep open whilst heating page is loaded into DOM -->
    <preference name="SplashMaintainAspectRatio" value="true" />
  </platform>
  <platform name="ios">
    <preference name="FadeSplashScreen" value="false" />
    <preference name="SplashScreen" value="screen" />
    <preference name="AutoHideSplashScreen" value="false" />
  </platform>

Also within Index.js you will need to add some code :-

Within your on device ready function :

    setTimeout(function () {
        navigator.splashscreen.hide();
    }, 50);

There is a lot of mixed documentation, but I can confirm the settings above work for my project.