在Ionic3中在后台加載頁面

Question

我在Ionic3應用程序中使用選項卡模板，共有3個頁面，所有頁面均帶有圖像。 當應用程序加載時， HomePage正常呈現圖像且沒有延遲。 但是，當我第一次嘗試打開其他頁面時，在打開頁面和加載圖像之間有相當長的時間。 頁面加載后，就不會再發生這種情況。

所有圖像均按如下方式裝入卡中：

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

在Ionic文檔中，我沒有發現與后台加載頁面或圖像有關的任何內容。

我試圖使用this.nav.push(SecondPage); 在首頁中，在第二個ionViewDidLoad() {this.navCtrl.pop();}之前，在this.splashScreen.hide(); ，但這是一個愚蠢的解決方法，因為它實際上在顯示初始屏幕時推送並彈出頁面。

有沒有一種方法可以在應用啟動期間加載所有頁面，甚至在頁面加載之前顯示微調框？

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（第二頁）

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（第二頁）

<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

如果您的代碼需要在其他頁面上顯示之前運行，則可以將其他頁面導入到主頁中，並在其中進行所有操作。 切換頁面時，所有離子操作只需加載dom