Laden Sie die Seite im Hintergrund in Ionic3

Question

Ich verwende die Registerkarte Vorlage in meiner Ionic3 App, mit 3 Seiten, alle von ihnen mit Bildern. Wenn die Anwendung geladen wird, wird die HomePage normalerweise mit Bildern und ohne Verzögerung gerendert. Wenn ich jedoch versuche, die anderen Seiten zum ersten Mal zu öffnen, ist die Zeit zwischen dem Öffnen der Seite und dem Laden des Bildes sehr hoch. Sobald die Seite geladen ist, passiert das nicht mehr.

Alle Bilder innerhalb der Karten geladen sind wie folgt:

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

Innen Ionic Dokumentation, habe ich nicht alles im Zusammenhang laden Seiten oder Bilder im Hintergrund gefunden.

Ich versuchte, ein this.nav.push(SecondPage); auf der Startseite und ein ionViewDidLoad() {this.navCtrl.pop();} in den zweiten vor this.splashScreen.hide(); zu verwenden, aber es ist ein dummes Problem zu umgehen, weil sie die Seiten tatsächlich drücken und Pop, während Begrüßungsbildschirm zeigt, ist.

Es gibt eine Möglichkeit, alle Seiten während des App-Starts zu laden oder sogar einen Spinner vor dem Laden der Seite anzuzeigen.

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 (zweite Seite)

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 (zweite Seite)

<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

Wenn Sie Code haben, der auf den anderen Seiten ausgeführt werden muss, bevor sie angezeigt werden, können Sie die anderen Seiten in Ihre Homepage importieren und alles tun, was Sie tun müssen. Wenn Sie zwischen den Seiten wechseln, müssen Sie nur das dom laden