For that reason i am using a splash screen (app loading screen) that shows a nice animation while loading the needed library parts.
|Splash Screen loading animation|
To be faster than light and quicker than warp ;-) the needed markup has to be included directly into the main html file. Doing it this way the browser can instantly show the splash screen right after loading the html markup.
Using an iOS device, you have to make sure that the needed viewport-meta-tag is included in the head section:
<meta name="viewport" content="minimal-ui, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
The UI5 lib automatically injects this meta-tag on app start, but this is much too late for the loader. The UI5 library needs to load all sources using the AMD (Asynchronous Module Definition) appoach. After loading all dependencies, the framework starts manipulating the browser DOM.
The animation is heavily focused on CSS3 animation. If you have to support older browsers, you can implement a fallback that uses an animated image (gif or png) instead.
Some cool CSS3 animations can be found on the codrops website, which is my personal favorite for design resources.
MarkupAt the end of the site there is a special section that covers the needed markup around the used CSS.
<div id="splash-screen"> <div class="splash-screen-text">Loading</div> <div class="splash-screen-circle-outer"></div> <div class="splash-screen-circle-inner"></div> </div>
On application launch, the corresponding markup will be removed from the DOM using jQuery.
Finally the app will be launched using a small switch framework that recognizes the device readyness of native cordova apps (device container is ready) and general web apps (window is ready).
Using this approach, the user will have a visual feedback, that something is still going on and the splash-screen is also a nice goody.
Custom Splash Screen