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!
Ad Blocking Detected
Please consider disabling your ad blocker for our website.
We rely on these ads to be able to run our website.
You can of course support us in other ways (see Support Us).
[Solved] Hide element or entire body while loading a page
(@hans)
Famed Member Admin
Joined: 11 years ago
Posts: 2660
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>
Ad Blocking Detected
Please consider disabling your ad blocker for our website.
We rely on these ads to be able to run our website.
You can of course support us in other ways (see Support Us).