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.
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();
});
Related
I have created an Ionic app but the load time is too much and sometime white screen appears before loading.
How can i reduce the load time?
Issue i am facing as below:
If i keep value as 6000, i am getting the below error:
<preference name="loadUrlTimeoutValue" value="6000" />
Error:
Application Error - The connection to the server was unsuccessful. (file:///android_asset/www/index.html)
If i increase the value as 60000, i am getting white screen after splash and the white screen is visible for around 10 to 15 seconds, then it disappears and the app loads.
Below is the config.xml details.
<preference name="SplashMaintainAspectRatio" value="true"/>
<preference name="SplashShowOnlyFirstTime" value="false"/>
<preference name="FadeSplashScreenDuration" value="1000"/>
<preference name="SplashScreenDelay" value="6000"/>
<preference name="ShowSplashScreenSpinner" value="true"/>
<preference name="AutoHideSplashScreen" value="true"/>
<preference name="FadeSplashScreen" value="true"/>
<preference name="ShowSplashScreen" value="true"/>
<preference name="SplashScreenBackgroundColor" value="0x1d1c1e" />
<preference name="loadUrlTimeoutValue" value="6000" />
A couple things to note here. First, you've got SplashScreenDelay set to 60 seconds (60000 miliseconds). That's a very long time. According to docs: "Amount of time in milliseconds to wait before automatically hide splash screen." Secondly, you have AutoHideSplashScreen set to false.
What's your end goal here? I'd recommend setting AutoHideSplashScreen to 'true'. Then decrease SplashScreenDelay.
If you want to control exactly when the splash screen disappears, you can.
Install the plugin if you don't have it (https://ionicframework.com/docs/native/splash-screen).
Add to your constructor in your parent component (likely app.component.ts):
private splashScreen: SplashScreen
Inside your component, you can choose when you want to hide the splash screen. For me I typically use it in ngOnInit(). Just use this.splashScreen.hide(); to close the splash screen. Granted, you can use later lifecycle hooks depending on when you want the app to hide the splash screen.
At this point you can remove AutoHideSplashScreen from your config.xml.
Now to stop the white flash before, you'll need to add this to your config.xml:
<preference name="SplashScreenBackgroundColor" value="0x1d1c1e" />
This color is for a dark grey, but you can adjust it to whatever color you want.
Is there a way to get it as soon as i start my application and after that i get the login screen, and get ride of the SplashScreen.
Or a way to modify something so my animation become my SplashScreen ?
Thank you.
Put a longer timeout in your config.xml and disable it yourself when your home screen is loaded.
config.xml
<preference name="SplashScreenDelay" value="30000" />
app.component.ts
platform.ready().then(() => {
splashScreen.hide();
});
Ionic hides the splash screen as default, so if the splash is hidden but the main application is not ready yet or the home page still loads some data, you will find the white screen!.
The suggested solution (control hiding the splash screen):
Disable hiding the splash screen by default from config preferences.
Hide it manually splashScreen.hide(); when you want to hide it
either when the platform is ready or inside the home page controller.
config.xml
<preference name="AutoHideSplashScreen" value="false" />
app.component.ts OR home.page.ts
platform.ready().then(() => {
splashScreen.hide();
});
You can run/ build your application in production mode.
For Android Build, e.g: ionic cordova build android --prod
For Android Run, e.g: ionic cordova run android --prod
Build using ionic cordova cli
Run using ionic cordova cli
The best Solution I tested now is :
config.xml:
//Put a long time for splash screen delay to avoid that the splash screen hides and the interface become white:
<preference name="SplashScreenDelay" value="50000" />
//just animation duration before being hided
<preference name="FadeSplashScreenDuration" value="800" />
app.component.ts
constructor(
public platform: Platform,
public statusBar: StatusBar,
public splashScreen: SplashScreen
){
// ensure that the interface is loaded by adding 500ms or less before hiding the splash screen manually
this.platform.ready().then(() => {
setTimeout(() => {
this.splashScreen.hide();
}, 500);
});
}
Hello I'm building an app with Ionic, and I want to remove the loading spinner on splash screen when the app starts, any solution for this?
Add this to your config.xml-file:
<preference name="ShowSplashScreenSpinner" value="false" />
Here are som more preferences you can make use of.
I am working on a project which is in ionic framework.When I start the app there is a splash screen of login. When I logged in , for some time there is a white Blank screen appears and then next view is get rendered. I want to remove that white blank screen. any help will be appreciated.
I tried many versions of cordova-plugin-splashscreen, and I found that version 2.0.0 works perfect. Please try it, regards:
cordova plugin add cordova-plugin-splashscreen#2.0.0
Install splashscreen
cordova plugin add https://github.com/apache/cordova-plugin-splashscreen.git
And set the following preferences in the config.xml
<preference name="SplashScreen" value="screen"/>
<preference name="SplashScreenDelay" value="2000"/>
<preference name="AutoHideSplashScreen" value="false"/>
<preference name="ShowSplashScreenSpinner" value="true"/>
<preference name="SplashShowOnlyFirstTime" value="false"/>
<preference name="FadeSplashScreenDuration" value="1000"/>
You can also use a setTimeout function to programatically hide the splash screen:
Previously you need set:
<preference name="AutoHideSplashScreen" value="false"/>
Then:
initializeApp() {
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
this.statusBar.styleDefault();
setTimeout(() => {
this.splashScreen.hide();
}, 3000);
});
}
I have an Apache Cordova project using VS2015 and am using the Ionic framework.
My config.xml includes the following:
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />
However I only see the splash screen for a very brief duration (maybe 1/2 a second) when deploying to an iOS device.
Is there some other implementation that is required for splash screens to appear for the time specified by 'SplashScreenDelay'?
Have u tried in in an emulator it might me a one off issue with the device.I would recoment using the GennyMotion emulator.
If you are setting up the splash screen using the cli i would recommend this tutorial and video here
http://pointdeveloper.com/how-to-add-splash-screen-for-ionic-framework-apps/