Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Remove White Flicker after splashscreen phonegap 3.3

How is it possible to create an app, add the splashscreen plugin, the splashscreen should disappear when the device is ready and no WHITE FLICKER to appear?? This happends on Adobe build and also on cli build on android plaform!

These are the simple steps I used over and over again for about a week to figure this thing out:

  • I created an app: phonegap create app
  • I added the plugin: phonegap local plugin add org.apache.cordova.splashscreen
  • I added this to the config.xml file from www folder:
<feature name="SplashScreen">
    <param name="android-package" value="org.apache.cordova.splashscreen" />
<!--     <param name="onload" value="true" /> -->
</feature>

Now the plugin is set. To make sure that the splashscreen disappears after the devide is loadeed I added:

navigator.splashscreen.hide(); 

in index.js under function onDeviceReady

With this steps it works ok. The splashscreen shows ok, it disappears ok but a white flash appears. Why on earth is this happening? Is the splashscreen hiding before everything loads or why? I noticed that when I set the splashscreen a value for example 3 seconds, the white flash disappears but I want it to disappear as fast as the device is ready because I have another effect wich starts with the device ready and if I enter the second time in the app, this loads faster and the splashscreen just stays on unnecesarry and the effect happends underneath the splashscreen.

So how to finally solve this thing?

I also tried

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

I tried setting the body background to black because the effect I was talking about was a black div that fades out at the start of the application.

And I also tried making webview black

<preference name="backgroundColor" value="0x000000" />

Everything without luck.

How can I solve this? I think that the easyest way out of here is to set the webview to black but my preference command is not working.

like image 936
Alex Stanese Avatar asked Feb 20 '14 12:02

Alex Stanese


Video Answer


2 Answers

I added <preference name="SplashScreenDelay" value="10000" /> to my config.xml to make sure splash screen stays on, then navigator.splashscreen.hide() to hide it after my app's home page is created (rather than immediately after 'deviceready'). If I put it right after deviceready, I get a white flash because I conditionally change pages.

You could even do a setTimeout on the navigator.splashscreen.hide(), to a couple hundred ms (or whatever the delay time is).

like image 173
Joe's Ideas Avatar answered Oct 21 '22 18:10

Joe's Ideas


Try this it's working fine on s6 edge

<preference name="SplashScreen" value="screen" />
<preference name="FadeSplashScreen" value="false" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="SplashScreenDelay" value="3000" />
like image 22
Hitesh Sahu Avatar answered Oct 21 '22 19:10

Hitesh Sahu