Geek Answers Handbook

Hide first loading of jQuery page until fully loaded

When I first load the home page of my jQuery Mobile-based website, it appears as 1 second before processing jQuery Mobile, after which the page becomes blank for 1 second, and then the final page rendering is completed so that the last page appears. This gives some blink effect, which I want to avoid, especially because, for example, all the elements that jQuery Mobile needs to be disassembled are visible for the first second (for example, pop-ups are not hidden, etc.).

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

Thanks in advance.

+4
source share
2 answers

This is what I did, but it is not good for people who have disabled JS. So I do the same, but I hide the body through javascript right after the opening tag tag.

<body> <script type="text/javascript"> document.body.style.display = 'none'; </script> ... </body>
0
source

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

Example:

HTML:

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

JS:

 $("#start").one("pageinit",function(){ $("body").show(); });
+4
source

More articles:


All Articles