Load page in background in Ionic3

Question

I'm using the tab template in my Ionic3 app, with 3 pages, all of them with images. When the application loads, the HomePage renders normally with images and no delay. However, when I try to open the other pages for the first time, there is a considerable amount of time between opening the page and image loading. Once the page is loaded, this doesn't happen anymore.

All images are loaded inside cards as followed:

<ion-card>
    <img src="assets/prettyimg.png"/>
    <div class="card-title">Pretty!</div>
    <div class="card-subtitle">Pretty pretty!</div>
</ion-card>

Inside Ionic documentation, I didn't found anything related to load pages or images in background.

I tried to use a this.nav.push(SecondPage); in the home page and a ionViewDidLoad() {this.navCtrl.pop();} in the second before this.splashScreen.hide(); , but it's a silly workaround, because it actually push and pop the pages while splashscreen is showing.

There's a way to load all pages during the app start or even show a spinner before page loading?

tabs.html

<ion-tabs id="navigationtabs" color="primary">
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="ice-cream"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="card"></ion-tab>
</ion-tabs>

tabs.ts

import { Component } from '@angular/core';
import { HomePage } from '../home/home';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  tab1Root: any = HomePage;
  tab2Root: any = AboutPage;
  tab3Root: any = ContactPage;
  constructor() {}
}

about.html (second page)

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-about',
  templateUrl: 'about.html'
})
export class AboutPage {
  constructor(public navCtrl: NavController) {}
}

about.html (second page)

<ion-header>
  <ion-navbar color="primary">
   <ion-title><img src="assets/logo.png" style="display:inline-block" width="112px"/></ion-title>
    <ion-buttons end>
      <button ion-button icon-only>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content class="card-background-page">

  <ion-card>
    <img src="assets/sorvete.png"/>
    <div class="card-title">Sorvetes</div>
    <div class="card-subtitle">Deliciosas combinações para você escolher!</div>
  </ion-card>

  <ion-card>
    <img src="assets/cobertura.png"/>
    <div class="card-title">Coberturas</div>
    <div class="card-subtitle">Para você dar o toque final no seu sorvete!</div>
  </ion-card>

  <ion-card>
    <img src="assets/acai.png"/>
    <div class="card-title">Açaí na Tigela</div>
    <div class="card-subtitle">Prove o saboroso açaí na tigela!</div>
  </ion-card>

  <ion-card>
    <img src="assets/gelatos.png"/>
    <div class="card-title">Gelatos Italianos</div>
    <div class="card-subtitle">Para paladares exigentes!</div>
  </ion-card>

  <ion-card>
    <img src="assets/doce.png"/>
    <div class="card-title">Doces</div>
    <div class="card-subtitle">De dar água na boca!</div>
  </ion-card>

  <ion-card>
    <img src="assets/salgado.png"/>
    <div class="card-title">Salgados</div>
    <div class="card-subtitle">Saborosos lanches para você apreciar!</div>
  </ion-card>

  <ion-card>
    <img src="assets/outro.png"/>
    <div class="card-title">Bebidas</div>
  </ion-card>

</ion-content>

Answer 1

If you have code that needs to be run in the other pages before they show, you can import the other pages into your homepage and do everything you need to do there. When you switch pages, all ionic has to do is load the dom