I can not fully understand the jQuery Mobile page events hierarchy.
How do I assemble the entire contents of an HTML page (and its modifications) and only present it to the user end when the page is ready?
For example: I use a JS function to calculate screen dimensions to center some elements (horizontally and vertically), but when I access the page, the elements appear at the top and are shifted to the center of the page. Of course this is done quickly, but it is noticeable by the end user.
One thing you should always keep in mind is to have everything in CSS that you can have in CSS. For example, if you want to hide an element until the page loads, then it is better to hide directly in the CSS instead of hiding in the javascript and then displaying.
Your question has no code and is missing some detail. I leave here a suggestion that is drastic, but it works.
Hide the <body> in CSS and then show it when the page is ready.
CSS
body {
display: none;
}
Javascript / jQuery
$(document).ready(function(){
$('body').show();
});
Just as I used <body> here (which is a drastic one), you can use it in more specific elements.
I have to leave a save: in pages where javascript is disabled, nothing will be shown ... but there, nowadays, all pages use javascript.