Animated splash screen SplashPage shows Homepage first

Ionic Framework ionic-v3
1

During running the splash screen it will open the home page for some millisecond and then loading the splash screen .How can i avoid that initial loading

My app.component.ts file


export class MyApp {
  rootPage:any = HomePage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, modalCtrl: ModalController) {

    platform.ready().then(() => {

      statusBar.styleDefault();

      let splash = modalCtrl.create(SplashPage);
      splash.present();

    });
  }
}

splashPage.ts


export class SplashPage {

  constructor(public navCtrl: NavController, public navParams: NavParams, public viewCtrl: ViewController,public splashScreen: SplashScreen) {
  }

  ionViewDidEnter() {

    this.splashScreen.hide();

    setTimeout(() => {
      this.viewCtrl.dismiss();
    }, 4000);

  }

}
1 Like
2

The problem is you are using a modal as a splash screen, and you’re waiting until platform ready to present it. Why not use the splashscreen plugin that comes with ionic?

3

Isn’t the modal additionally to the normal splash?

Why do you need that @sabarinathen?
What is that timeout for?

Add log outputs to both functions (and inside the platform.ready) to see what is fired when. I think because pf the platform.ready this is later than expected.

4

making animation splash screen. After animation will finish i will move on to the home page. How could i implement that @Sujan12 @beck24

5

I would probably start the app in this SplashPage and later replace the rootpage so it completely goes to a different Page. Not load the final page and then overlay the SplashPage. (untested)

6

I have the same problem, is there a way to avoid this behaviour?