Phonegap - 本机启动画面和 index.html 之间的空白屏幕

Question

我正在为 iOS 和 Android 使用 cordova CLI（没有 phonegap-build 或任何其他花哨的东西）制作一个 phonegap 应用程序。然后我使用 XCode/Eclipse.

编译应用程序

我正在为我的项目使用 jQuery Mobile 和其他一些 javascript 插件。因此，当我的应用程序加载时，在初始屏幕（本机）之后，屏幕保持空白大约 2-5 秒，而我的索引页面中的所有 javascript 都已加载。我正在尝试找出一种在所有 js 加载时显示加载屏幕的方法，但还没有弄清楚该怎么做。

那么在HTML、CSS或Javascript宇宙中有什么方法可以帮助我实现这一点吗？我基本上是一个 iOS 开发者，所以这对我来说是新的。

如果你好奇的话，这是我的 javascript。 ;-)

<script type="text/javascript" src="cordova.js"></script>
<script src="jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">
<script src="owl-carousel/owl.carousel.min.js"></script>  
<script type="text/javascript" src="fancybox/jquery.fancybox.js"></script>
<link rel="stylesheet" href="fancybox/jquery.fancybox.css" type="text/css" media="screen" />
<script src="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" type="text/css" href="flatUI/jquery.mobile.flatui.css" />
<script src="CSS.supports.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<link href='fullcalendar.min.css' rel='stylesheet' />
<script src='lib/moment.min.js'></script>
<script src='fullcalendar.min.js'></script> 
<script src="swiper/jquery.slideme2.js"></script>
<link href="swiper/slideme.css" rel="stylesheet"/>

Answer 1

在 config.xml

中将 AutoHideSplashScreen 设置为 false

<preference name="AutoHideSplashScreen" value="false" />

所以现在你需要手动关闭它，你可以通过将下一行放在加载所有 javascript 的地方来做到这一点：

navigator.splashscreen.hide();

例如：

function onDeviceReady() {
    navigator.splashscreen.hide();
}

如果你想要另一个屏幕，你需要在加载 javascripts 之前加载它。您可以导航到静态 "welcome" 页面并在之后加载您的脚本。

Phonegap - 本机启动画面和 index.html 之间的空白屏幕

Phonegap - Blank screen between native splash and index.html

html

javascript

jquery-mobile

cordova