A white screen appears within a second after the screen saver

I made an application with IBM mobileFirst 7.0 (I also use Ionic), and I noticed that immediately 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) will solve the problem. But nothing happens. (I also changed the timeout, but nothing changed)

I want to see my application right after the splash screen disappears without a white screen. How can i do this?

UPDATE AND DECISION:

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

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

and then download the Ionic and the controllers.

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

No white screen appears anymore: D

+1
ibm-mobilefirst ionic-framework
source share
2 answers

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

So, I think you are on the right track. It seems like you really should try to extend the length of the splash screen, since something in your application takes some time to load (hence the white blinking), so by stretching the splash screen a little longer, allowing you to download everything you need to download, and then remove the pop-up screen may be a possible workaround.

  • Make sure that this API is called only after wlCommonInit been called
  • Increase the duration yet.

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

+1
source share

You can also use ng-cloak to hide any white flashes caused by angular.

+1
source share

All Articles