Ionic App 需要更多时间来加载启动画面和白屏

Question

我创建了一个 Ionic 应用，但加载时间太长，有时加载前会出现白屏。

如何减少加载时间？

我面临的问题如下：

1. 如果我将值保持为 6000，我会收到以下错误：

   <preference name="loadUrlTimeoutValue" value="6000" />

错误：

Application Error - The connection to the server was unsuccessful. (file:///android_asset/www/index.html)

1. 如果我将值增加到 60000，我会在启动后出现白屏，并且白屏会显示大约 10 到 15 秒，然后它会消失并加载应用程序。

下面是 config.xml 的详细信息。

 <preference  name="SplashMaintainAspectRatio" value="true"/>
    <preference  name="SplashShowOnlyFirstTime" value="false"/>
    <preference  name="FadeSplashScreenDuration" value="1000"/>
    <preference  name="SplashScreenDelay" value="6000"/>
    <preference  name="ShowSplashScreenSpinner" value="true"/>
    <preference  name="AutoHideSplashScreen" value="true"/>
    <preference  name="FadeSplashScreen" value="true"/>
    <preference  name="ShowSplashScreen" value="true"/>
    <preference name="SplashScreenBackgroundColor" value="0x1d1c1e" />
    <preference name="loadUrlTimeoutValue" value="6000" />

Answer 1

这里有几点需要注意。首先，您将 SplashScreenDelay 设置为 60 秒（60000 毫秒）。这是一个很长的时间。根据docs：“在自动隐藏启动屏幕之前等待的毫秒数。”其次，您将AutoHideSplashScreen 设置为false。

您在这里的最终目标是什么？我建议将AutoHideSplashScreen 设置为“真”。然后减少SplashScreenDelay。

如果您想准确控制闪屏何时消失，您可以。

1. 如果没有插件，请安装 (https://ionicframework.com/docs/native/splash-screen)。
2. 在您的父组件（可能是 app.component.ts）中添加到您的构造函数： private splashScreen: SplashScreen
3. 在组件内部，您可以选择何时隐藏启动画面。对我来说，我通常在ngOnInit() 中使用它。只需使用this.splashScreen.hide(); 关闭启动画面。当然，您可以根据您希望应用何时隐藏初始屏幕来使用以后的生命周期挂钩。
4. 此时您可以从 config.xml 中删除 AutoHideSplashScreen。

现在要停止之前的白色闪烁，您需要将其添加到您的 config.xml： <preference name="SplashScreenBackgroundColor" value="0x1d1c1e" /> 此颜色适用于深灰色，但您可以将其调整为您想要的任何颜色。