PhoneGap Android - Splash screen disappears before the first HTML page is done loading.

Skip to first unread message

Chris Jiang

Dec 14, 2011, 11:39:45 PM12/14/11
Hi guys, this is a very frustrating issue I've encountered, and yet not found any solution. Dunno if anyone has ever ran into this before.

My app starts with javascript loading from google map api 3.0 server in the head part of main HTML page. Since my connection is pretty poor to the google servers, my app always hangs there with a white screen loading the js files. So I added a splash screen using super.setIntegerProperty("splashscreen", R.drawable.splash); in the main App class, but it just disappears after a few seconds, not related to the loading status of the webview.

Now, my app looks pretty weird when starting. Splash comes out and stays for a few seconds, then white screen for like a minute or two loading google api, then showing the HTML5 UI.

Anyone encountered this problem and have some kinda solution? Thanks!

Simon MacDonald

Dec 15, 2011, 7:34:24 AM12/15/11

It sounds like you are loading a lot of JavaScript and probably some of it is remote script tags in the head tag of your HTML. Those script tags will be blocking which is why it takes awhile to get to the body tag to start displaying your HTML. Mys suggestions are:

1) move some of the script tags to the end of the body tag so they are loaded last.
2) try adding a delay on loadUrl so the splash screen stays up longer.

super.loadUrl("index.html", 3000);

Mind you this is just me debugging remotely without seeing any of your code.

> --
> You received this message because you are subscribed to the Google
> Groups "phonegap" group.
> To post to this group, send email to
> To unsubscribe from this group, send email to
> For more options, visit this group at
> For more info on PhoneGap or to download the code go to

Chris Jiang

Dec 15, 2011, 8:38:42 AM12/15/11
Thank you Simon, this is exactly the reason occuring this problem, but yet I can't find a good way to solve it.

As I've mentioned, I've been loading Google Map API 3 Javascript at the beginning of my app to be prepared for later usage. However, it takes too much time, or even some times not able to connect to google servers due to my poor internet connection. I've tried to put the <script> tag to the bottom part of <body>, but the js itself loads other js files too.

I've considering download the js file and put them to the www asset as local file, but it occurs (may or may not) cross domain problems with google servers. Also, google map api updates very often, without any notification. Local using these files may cause unexpected errors.

I've considered about delaying the display of main webview, but this doesn't help. Because I'm not sure how much time it actually takes to download the js files.

What I'm expecting is a way to detect when the webview is fully downloaded or loaded. Is there any way or event to handle this?

Matei Dragos

Feb 1, 2012, 9:31:53 AM2/1/12
to phonegap
yes, I am interested in that too. Sending a message when the page is
loaded from js to phonegap and in java code cancel the splash screen
would be a possible aproach.


Jun 2, 2012, 8:34:34 AM6/2/12
Can anyone explain if delaying splash screen for N seconds actually delays Phonegap app loading? 

I really like the iOS approach to splash screen -- you just add it into XCode and it loads automagically and stays there till app is loaded. 

Is there a way to call end of splash screen in java on deviceready event?

Simon MacDonald

Jun 2, 2012, 11:15:02 AM6/2/12
Reply all
Reply to author
0 new messages