在 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); 并在 this.splashScreen.hide(); 之前的第二个中使用 ionViewDidLoad() {this.navCtrl.pop();} ，但这是一个愚蠢的解决方法，因为它实际上会在显示启动画面时推送和弹出页面。

有没有办法在应用启动期间加载所有页面，甚至在页面加载之前显示微调器？

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

如果您有代码需要在其他页面中运行才能显示，您可以将其他页面导入您的主页并在那里执行您需要执行的所有操作。当你切换页面时，所有 ionic 所要做的就是加载 dom