White screen appears for a split second after splash screen

问题

I have made an app with IBM mobileFirst 7.0 (I also use Ionic) and I notice that right after the splash screen and for half a second or so, a white screen appears. I searched the web and some people said that uncommenting

autoHideSplash: false,

in wlInitOptions and adding this code:

var app = angular.module('app.controllers', []);

//manually hide splash screen
app.run(function($ionicPlatform) {
      $ionicPlatform.ready(function() {
            setTimeout(function() {
                WL.App.hideSplashScreen();
            }, 100);
         });
        })

in my controller (I only have 1) would solve the issue. Yet nothing happens. (I also changed the timeout but nothing seems to change)

I want to seee my app right after the splash screen dissappears without the white screen. How can I do that?

UPDATE & SOLUTION:

After reading Idan's answer, I made a few changes that fixed the problem. First of all in my index.html, I was loading MobileFirst at the end of my <head>, after Ionic and all controllers had loaded. I changed that and now in the <head> tag I firstly load:

<!-- mobileFirst initialization -->
           <script src="js/wlInit.js"></script>
           <script src="js/messages.js"></script>

and then I load Ionic and the controllers.

I also changed the timeout of WL.App.hideSplashScreen() in my controller from 100 to 1500.

No white screen appears any longer :D

回答1:

I see you're using the WL.App API, but are you sure you're using it in the right place? This API can be called only after function wlCommonInit was called.

So I think you're on the right path. It sounds like you should indeed try to extend the duration of the splash screen as something in your app is taking a while to load (hence the white flashing), so by extending the splash screen a little while longer, letting whatever it is to load, and then removing the splash screen could be a possible workaround.

Make sure this API is called only after wlCommonInit was called
Increase the duration some more.

Read more about the API, here: https://mobilefirstplatform.ibmcloud.com/tutorials/en/foundation/7.0/advanced-client-side-development/common-ui-controls/#splashscreen

回答2:

You can also use ng-cloak to hide any white flashes that angular causes.

来源：https://stackoverflow.com/questions/41487246/white-screen-appears-for-a-split-second-after-splash-screen

标签

ionic-framework

ibm-mobilefirst