4

At the first load of the home page of my jQuery Mobile based website, it appears like 1 second before being processed by jQuery Mobile, then the page become blank for 1 second and then, the final render of the page is done, letting the final page appear. It gives a sort of blink effect that I want to avoid, especially because for exemple all elements that jQuery Mobile need to parse are visible during the first second (for exemple, popup aren't hidden, etc.).

I tried with other jQuery Mobile based websites and they don't seem to have this issue. Is there a configuration or something ? If it's not the case, I would like to hide the page until it's completely loaded.

Thank in advance.

kalvn
  • 404
  • 5
  • 14

2 Answers2

4

You can use a display none on the body and then bind an event listener for pageinit on your first page.

Example:

HTML:

<body style="display:none">
<div id="#start" data-role="page"></div>
</body>

JS:

$("#start").one("pageinit",function(){
    $("body").show();
});
salbahra
  • 535
  • 5
  • 5
0

That's what I did, but it's not good for people who disable JS. So I do the same but I hide the body via javascript just after the opening body tag.

<body>
    <script type="text/javascript">
document.body.style.display = 'none';
</script>
...
</body>
kalvn
  • 404
  • 5
  • 14
  • 3
    `display: none` might prevent some JS from working, especially if you're trying to measure sizes. Using `visibility: hidden` might be a better option. – Mark Boulder Nov 10 '13 at 22:57
  • That's true. In my case I don't work on sizes with JS so I faced no issue but `visibility:hidden` is definitely a good alternative. – kalvn Jul 16 '14 at 14:53