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,905 Views
 Hans
(@hans)
Famed Member Admin
Joined: 11 years ago
Posts: 2683
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
Share: