IONIC 应用程序启动画面后的白屏

Question

I have a "problem" with my app. When it's running, after the splash screen and before the app is ready, a white screen appears for about 5/6 seconds and it's so annoying. How is it possible to avoid this white screen?

I didn't see a lot of questions about this (without working answers) and I would like to have an updated answer. I don't post code because I don't know which code could be useful.

Ionic version 3.13.2

Thank you.

Answer 1

This may be due to the fact that your application takes longer to load than the duration of the splahscreen.

In your config.xml file you may have something like:

<preference name="SplashScreenDelay" value="3000" />

That means that the splashscreen will automatically fade out after 3 seconds. However, if your app is not ready after that time, you will see a white screen while your app finishes loading.

The solution is to set a longer time for your splashscreen and to also turn off AutohideSplashScreen . In the config.xml file:

<preference name="AutohideSplashScreen" value="false" />
<preference name="SplashScreenDelay" value="30000" />

Then you need to make sure that you turn the splashscreen off from inside your app, as soon as your app is ready.

Typically in the app.component.ts class constructor:

this.platform.ready().then(() => {
  this.splashScreen.hide();
});

Answer 2

config.xml

 <preference name="auto-hide-splash-screen" value="false" /> 
 <preference name="AutoHideSplashScreen" value="false" />

main.js please change

this.platform.ready().then(function () {
        _this.statusBar.styleDefault();
        _this.splashScreen.hide();
    });

to

this.platform.ready().then(function () {
            _this.statusBar.styleDefault();
            setTimeout(function(){
                _this.splashScreen.hide();

            }, 3000);
        });