hi.. how can i show a loading screen/page after my splash page or extend the view of my splash page until my app opens? Currently it takes my app almost 20-30 seconds to load after the splash page disappears and turns to a black screen...
Attached is an image of what my config file looks like. any advice or instruction would be great.. i am not a coder, but i can figure things out fairly good. thanks in advance.
Attached is an image of what my config file looks like. any advice or instruction would be great.. i am not a coder, but i can figure things out fairly good. thanks in advance.
- 7 Posts
- 0 Reply Likes
- not understanding!
Posted 5 years ago
JesseMonroy650 (Volunteer), Champion
- 3325 Posts
- 122 Reply Likes
@TaylorElaine, See my online demos at: http://codesnippets.altervista.org/examples/phonegap/demos/PUBLIC.Apps.html
In *index.html*, see section
in that section, see
2000=milli-seconds = 2 seconds.
Jesse
In *index.html*, see section
if (device.platform === "iOS") {
in that section, see
setTimeout(function() {
navigator.splashscreen.hide();
}, 2000);
2000=milli-seconds = 2 seconds.
Jesse
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
The OP wants the splash to hide when the first page is loaded. So, the hide() method should not be called after a certain period of time, but rather upon the documents 'load' event.
Note that this currently doesn't work properly on Android. The plugin author is working on it.
Note that this currently doesn't work properly on Android. The plugin author is working on it.
- 7 Posts
- 0 Reply Likes
Hi Petra... thank you for your response... What is OP? And is there a workaround... because I also noticed that when I'm on Wifi and accessing the app it takes about 30 seconds to open (splash to first app page)... and when I'm on my 4G I see the splash but only get a blackscreen thereafter waiting forever-never for my first app page to show... your thoughts?
JesseMonroy650 (Volunteer), Champion
- 3325 Posts
- 122 Reply Likes
@Petra, my code works on Android and iOS, and implements timeouts.
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
That's correct, Jesse, but I believe you're missing the point here.
The splash should disappear as soon as the index is fully loaded and ready to be displayed. Sometimes, that takes 3 seconds, sometimes 30.
The splash should disappear as soon as the index is fully loaded and ready to be displayed. Sometimes, that takes 3 seconds, sometimes 30.
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
Hi Elaine,
The OP is Original Poster, a common term for the person who started the thread.
If your first page takes that long, you are obviously loading a lot of remote data there. It would be a good idea to see how that can be avoided, for instance by moving some stuff to a next page and/or storing heavy stuff locally in your app.
The idea is to keep the splashscreen visible until the first page is loaded, then dismiss the splash. That can be done by preventing the splash from disappearing automatically after X seconds. Instead, catch the 'load' event on the document of the first page and then call splashscreen.hide() as indicated by Jesse.
However, if your first page takes indeed 30 secs or so before loading is completed, users may think the app is broken and run away before the splash has finally disappeared, so it is essential to have a quickly loading first page.
The OP is Original Poster, a common term for the person who started the thread.
If your first page takes that long, you are obviously loading a lot of remote data there. It would be a good idea to see how that can be avoided, for instance by moving some stuff to a next page and/or storing heavy stuff locally in your app.
The idea is to keep the splashscreen visible until the first page is loaded, then dismiss the splash. That can be done by preventing the splash from disappearing automatically after X seconds. Instead, catch the 'load' event on the document of the first page and then call splashscreen.hide() as indicated by Jesse.
However, if your first page takes indeed 30 secs or so before loading is completed, users may think the app is broken and run away before the splash has finally disappeared, so it is essential to have a quickly loading first page.
- 7 Posts
- 0 Reply Likes
Yes... I want to keep the the splash page visible up until that first page app load... OR can there be some type of hourglass or loading bar placed in BETWEEN the SPLASH page and first APP page?
Tell me this: My app pull my current website which is Responsive (not a Mobile website). Maybe it trying to pull my front page is causing the delay?! Since I dont want to change my website from being responsive to a mobile platform, could I possibly point my app's first page to just a login page (which may be lightweight), and (given users need to login anyway to interact with the app).
Thank you for the explanations as well. yes i don't want people to think it is broken... im just having this small issue so far!!!
>>>> That can be done by preventing the splash from disappearing automatically after X seconds. Instead, catch the 'load' event on the document of the first page and then call splashscreen.hide() as indicated by Jesse. <<<< What codin am I to use or add to prevent the disappearance??
Tell me this: My app pull my current website which is Responsive (not a Mobile website). Maybe it trying to pull my front page is causing the delay?! Since I dont want to change my website from being responsive to a mobile platform, could I possibly point my app's first page to just a login page (which may be lightweight), and (given users need to login anyway to interact with the app).
Thank you for the explanations as well. yes i don't want people to think it is broken... im just having this small issue so far!!!
>>>> That can be done by preventing the splash from disappearing automatically after X seconds. Instead, catch the 'load' event on the document of the first page and then call splashscreen.hide() as indicated by Jesse. <<<< What codin am I to use or add to prevent the disappearance??
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
You can prevent the splash from disappearing or at least delay it for a long time with
About your website's first page: yes, you can have a lightweight index.html as your 'front door'.
<preference name="auto-hide-splash-screen" value="false" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="SplashScreenDelay" value="30000" />
About your website's first page: yes, you can have a lightweight index.html as your 'front door'.
- 7 Posts
- 0 Reply Likes
@jessie and @petra ... thank you so much for your suggestions and help... so far things are working as desired. I have one more question: Is the screen before the splash page (its a black/gray design with my app name in the header) necessary and/or show up on all apps designed through phonegap??
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
- 7 Posts
- 0 Reply Likes
@petra this is the screen that shows up before my splash page... It may last 1-4 seconds
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
I'm sorry, I don't know. I have never seen such screen.
1. On what device are you testing this? Or is it a simulator/emulator?
2. What is the file size of your splash screen? Could it be that this black screen is shown until your device has loaded the splash?
1. On what device are you testing this? Or is it a simulator/emulator?
2. What is the file size of your splash screen? Could it be that this black screen is shown until your device has loaded the splash?
Related Categories
-
PhoneGap Framework
- 2926 Conversations
- 61 Followers
-
Plugins
- 1283 Conversations
- 38 Followers




Eyroniq,TaylorElaine
JesseMonroy650 (Volunteer), Champion