Hide jQuery mobile page first load until completely loaded

StackOverflow https://stackoverflow.com/questions/14954122

Question

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.

Was it helpful?

Solution 2

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>

OTHER TIPS

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();
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top