How to get rid of unwanted artifacts when running phonegap app?

Question

Mobile development

I created a mobile application on jquery mobile and using phonegap, everything works fine, the only thing is that when the application is launched, clumsy html is displayed on the screen literally for a split second, and after (apparently the styles are loaded) everything returns to normal. All pages in one file.
How to get rid of this unpleasant artifact?

Answer 1

You can display, for example, the logo in full screen, while the styles are loading.
Then, layout without css will not be visible.

Answer 2

What I did:
1. Immediately after the body tag, I added a preloader block
2. In the header, I added styles to it
#page-preloader {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: #fff;
z-index: 100500;
}
#page-preloader .spinner {
width: 192px;
height: 192px;
position: absolute;
left: 50%
top: 50%;
background: url('img/logo.png') no-repeat 50% 50%;
margin: -96px 0 0 -96px;
}
3. And the full page load event handler
$(window).on('load', function () {
var $preloader = $('#page-preloader'), $spinner = $preloader.find('.spinner' );
$spinner.fadeOut();
$preloader.delay(350).fadeOut('slow');
});