Page 1 of 1

Hide element or entire body while loading a page

Hide element or entire body while loading a page

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.
Examples: "MacOS X - Your question", "MS Word - Your Tip or Trick".

Please note that switching to another language when reading a post will not work!
Posts will not have a translated counterpart.




RSS Feed

Home Forums Web Development Hide element or entire body while loading a page

This topic contains 0 replies, has 1 voice, and was last updated by  hans 2 years, 4 months ago.

Viewing 1 post (of 1 total)
  • Author
    Posts
  • 8425

    hans
    Keymaster

    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>
Viewing 1 post (of 1 total)



You must be logged in to reply to this topic.