Faster loading and no white screen

tutorials
1

This is the method I use to make my Icon app load faster on Android and IOS devices - you are welcome to try it out - but as always make a copy first just in case things go wrong.

Firstly change the following lines in the config.xml file.

From

<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="5000" />

To:

<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashScreenDelay" value="5000" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="FadeSplashScreen" value="true" />
<preference name="ShowSplashScreen" value="true" />

Basically what this is doing is saying only display the splash screen until the white screen in Ionic takes over. The main benefit is you are getting rid of the 5 seconds splash screen delay. However, this causes a problem as the white screen in Ionic will be displayed a lot longer until it is fully loaded. So here comes the real trick instead of the blank white screen recreate your splash screen in Icon within the file app.htnl in the src/app folder.

This is my internal splash screen:

<div class="splash" id="splash"></div>

So basically the display is defined in the css class in - just a background color and a logo in the middle of the screen - the class is defined in the file app.sccs file. The main thing to notice is the div has an ID you need this to hide this div once Ionic loading is completed.

So all you have to do now is tell Ionic to hide the “internal splash screen” when your code takes over - this is easy in your root page ts file (ie. home.ts) use the following code:

ionViewDidEnter() {
    let splash = document.getElementById("splash");
    splash.style.display = "none";
}

So that it - you should now have faster loading!