Phonegap - Blank screen between native splash and index.html

Question

I am making a phonegap app using cordova CLI (no phonegap-build or any other fancy stuff) for iOS and Android. I then compile the app using XCode/Eclipse.

I am using jQuery Mobile and some other javascript plugins for my project. So when my app loads, after the splash screen (native), the screen stays blank for about 2-5 seconds while all the javascript in my index page loads. I am trying to figure out a way to display a loading screen while all the js loads but haven't yet figured out how to do it.

So is there any method in the HTML, CSS or Javascript universe that can help me achieve this? I'm basically an iOS dev so this is new to me.

Here are my javascripts if you're curious. ;-)

<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

Set AutoHideSplashScreen to false in config.xml

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

So now u need to turn it off manually and u can do this by putting the next line on place where all your javascripts are loaded:

navigator.splashscreen.hide(); 

For example:

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

If u want to have another screen, u need to load it before loading javascripts. U can navigate to a static "welcome" page and load your scripts after.