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!
[Solved] Hide element or entire body while loading a page
(@hans)
Famed Member Admin
Joined: 12 years ago
Posts: 2859
Topic starter
June 16, 2017 9:00 AM
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>