Remove White Flicker after splashscreen phonegap 3.3

Question

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.

Answer 1

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).

Answer 2

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" />

Answer 3

Try this

config.xml:

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

<preference name="SplashScreenDelay" value="10000"/>

<gap:plugin name="org.apache.cordova.splashscreen" />

Android does not seem to have an AutoHide param. We will hide it manually.

Adding the plugin reference in the config.xml is needed for the javascript code navigator.splashscreen.hide(); to work.

document.addEventListener('deviceready', function() {
  navigator.splashscreen.hide();
});

Answer 4

Set these values in config.xml of the app

<preference name="FadeSplashScreen" value="true" />
<preference name="FadeSplashScreenDuration" value="1.5" />
<preference name="ShowSplashScreenSpinner" value="false" />
<preference name="SuppressesIncrementalRendering" value="true" />