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

Question

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

我正在为我的项目使用 jQuery Mobile 和其他一些 JavaScript 插件。因此，当我的应用程序加载时，在启动屏幕( native )之后，屏幕会保持空白大约 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();
}

如果你想要另一个屏幕，你需要在加载 JavaScript 之前加载它。您可以导航到静态“欢迎”页面并在之后加载脚本。