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 most likely no translated for the post!





Share:
Notifications
Clear all

Hide element or entire body while loading a page  

  RSS

 Hans
(@hans)
Noble Member Admin
Joined: 7 years ago
Posts: 1521
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>

ReplyQuote
Share: