Page 1 of 1
Forum

Welcome to the Tweaking4All community forums!
When participating, please keep the Forum Rules in mind!

Topics for particular software or systems: Start your topic link with the name of the application or system.
For example “MacOS X – Your question“, or “MS Word – Your Tip or Trick“.

Please note that switching to another language when reading a post will not bring you to the same post, in Dutch, as there is no translation for that post!




Hide element or ent...
 
Share:
Notifications
Clear all

[Solved] Hide element or entire body while loading a page

1 Posts
1 Users
0 Likes
1,872 Views
 Hans
(@hans)
Famed Member Admin
Joined: 11 years ago
Posts: 2660
Topic starter  

One of my projects is to load a huge table, which them uses jQuery to cleanup, sort, format etc.
Obviously that does not look all that great for the viewer, so I wanted to keep the page invisible until everything was loaded and formatted.

I used this CSS trick:

<body class="initial-hide">
  ...
</body>

And CSS style:

.initial-hide {
   display: none;
}

This will keep the entire content hidden until we call the following javascript (at the bottom of your HTML file) - this will automatically execute when the document is done loading:

<script>
$(document).ready() {
    $('body').removeClass('initial-hide');
}
</script>

   
ReplyQuote

Like what you see and you'd like to help out? 

The best way to help is of course by assisting others with their questions here in the forum, but you can also help us out in other ways:

- Do your shopping at Amazon, it will not cost you anything extra but may generate a small commission for us,
- send a cup of coffee through PayPal ($5, $10, $20, or custom amount),
- become a Patreon,
- donate BitCoin (BTC), or BitCoinCash (BCH).

Share: