jQuery Mobile: page Events

Asked

Viewed 90 times

1

I can’t quite understand the hierarchy of page Events jQuery Mobile.

How do I assemble all the content of an HTML page (and its modifications) and just 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 moved to the center of the page. Of course this is done quickly, but is noticeable by the end user.

javascript jquery css mobile jquery-mobile

1 answer

1

One thing you should always keep in mind is to have everything you can have in CSS in CSS. For example, if you want to hide an element until the page loads, then it’s best to hide it directly in the CSS instead of hiding it in javascript and then show it.

Your question has no code and it lacks some detail. I leave here a suggestion that is kind of drastic, but it works.

Hide the <body> in CSS and show later when the page is ready.

CSS

body {
    display: none;
}

Javascript / jQuery

$(document).ready(function(){
   $('body').show(); 
});

Example

The same way I used <body> here (which is kind of drastic), can use in more specific elements. I have to leave a backup: on pages where javascript is disabled, nothing will be shown... but then, nowadays, all pages use javascript.

Browser other questions tagged javascript jquery css mobile jquery-mobile

You are not signed in. Login or sign up in order to post.