UX: JQM Header renders incorrectly for several seconds when page is loading.

UX: JQM Header renders incorrectly for several seconds when page is loading.

JQM V1.4.2 Browser: Chrome, Firefox. Platforms: Android V4.x.


The browser window paints the jqm header very weird when the page is loading (see video). The content spans several lines in the browser. After a few seconds (10 seconds on a smartphone, which is rather long) the jqm header is displayed correctly once all CSS/JS is loaded and executed.

Screencast:
 https://dl.dropboxusercontent.com/u/5629939/temp/20140430-jquery-mobile-header-startup-gui.mp4
 The video was made on a desktop, on a smartphone the issue is visible about 10 seconds so the effect is even more visible.


=> How can I improve the User Experience of this app when it is starting?
Should I resequence the loading of certain CSS/JS to make it look nicer?
I know how to develop a splash screen for ui-content but I cannot manipulate the jqm header as such so that problem would remain.


Try it yourself at :
 http://m.feestdagen-belgie.be/
 


Thanks,
Rolf.