CODEWITHSUNDEEP
javascriptjqueryhtmlload
Bonaca
Bonaca

Reputation: 313

How to prevent gradually showing a page?

My site loads images very slowly. Some text appears, then some tables, then some images... and then - body background image.
How can I force that nothing should be displayed till whole the page is ready ?

Upvotes: 6

Views: 256

Answers (2)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195992

You could add a class at the body which has display:none and remove it once the page is loaded..

<body class="loading">
...
</body>

and

<script>
    window.onload = function(){document.body.className = '';};
</script>

Upvotes: 4

nerdwaller
nerdwaller

Reputation: 1863

Probably the easiest / best way would be to use Javascript to do this. The main way I have seen this implemented is the document ready handler revealing all the hidden stuff.

$(document).ready(function() { $('*').show(); });  // Or something similar.

Of course, people like to see some sort of feedback of "progress" so your site doesn't appear poorly coded or as if the server is junk. So a loader bar or whatever.

As I mentioned above, the best place for these types of questions is Stack Overflow, and perhaps this will be moved over there by a higher-ranked individual. In the mean time, here is a very similar question on Stack Overflow.

Upvotes: 3

Related Questions