Hide Page Until Everything Is Loaded Advanced

Hide elements until page is fully loaded

In general, it's better not to do this, but instead to design the page so that progressive loading provides some content to the user while waiting for the rest of the page.

But doing it is quite easy: Just put your main content in an element (say, a div) that has a class on it (say, hidden), and remove that class when you want to show it:

CSS:

.hidden {
    display: none;
}

JavaScript when you're ready to show it:

document.getElementById("content").classList.remove("hidden");

(classList is supported by all modern browsers; if you need to support old browsers, it can be polyfilled or, to remove all classes, just do .className = "".)

Another approach is to add a class to body when it's loaded, and then classes on the various elements you want to show/hide during load, with CSS like this:

body:not(loaded) .hide-for-load {
  display: none;
}
body.loaded .hide-after-load {
  display: none;
}

Then .hide-for-load elements are hidden until you add the class, and .hide-after-load elements are hidden when you add the clas.

Live Example derived from your page:

setTimeout(function() {  document.body.classList.add("loaded");}, 1000);

body:not(.loaded) .hide-for-load {  display: none;}body.loaded .hide-after-load {  display: none;}

<div id="loading" class="hide-after-load">  Loading<!--All loading spinner design goes here--></div><header class="hide-for-load">  <!--Header stuff-->  <h1>My Title</h1></header><p class="hide-for-load">  <!--Main content-->  My content</p><footer class="hide-for-load">  <!--footer stuff-->  Footer stuff</footer>

How to deactivate the background when loader is loding

You need to add a overlay, here i posted an answer with basic please try this.
You can hide the loader by calling $('.overlay').hide(); in last of the addTable Function

$('.loader').show();
   var tableValue = [        {            "amount": 476426,            "billdate": "2018-09-01",            "outlet": "JAYANAGAR"          }        ]    addTable( tableValue );  


function addTable(tableValue) { var col = Object.keys(tableValue[0]); // get all the keys from first    var countNum = col.filter(i => !isNaN(i)).length; // count all which              // are number var num = col.splice(0, countNum); // cut five elements from frist col = col.concat(num); // shift the first item to last // CREATE DYNAMIC TABLE. var table = document.createElement("table");
 // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
 var tr = table.insertRow(-1); // TABLE ROW.

   for (var i = 0; i < col.length; i++) {     var th = document.createElement("th"); // TABLE HEADER.     th.innerHTML = col[i];            tr.appendChild(th); }
 // ADD JSON DATA TO THE TABLE AS ROWS. for (var i = 0; i < tableValue.length; i++) {
     tr = table.insertRow(-1);
     for (var j = 0; j < col.length; j++) {         var tabCell = tr.insertCell(-1);          var tabledata = tableValue[i][col[j]];if(tabledata && !isNaN(tabledata)){  tabledata = parseInt(tabledata).toLocaleString('en-in')}tabCell.innerHTML = tabledata;                    if (j > 1)                   tabCell.classList.add("text-right");               } }
 // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER. var divContainer = document.getElementById("newTable"); divContainer.innerHTML = ""; divContainer.appendChild(table); table.classList.add("table");  table.classList.add("table-striped");  table.classList.add("table-bordered"); //$('.overlay').hide(); }

.loader { position: absolute;  border: 16px solid #f3f3f3;  border-radius: 50%;  border-top: 16px solid blue;  border-bottom: 16px solid blue;  width: 120px;  height: 120px;  top: 45%;  left: 50%;  transform: translate(-50%, -50%);  -webkit-animation: spin 2s linear infinite;  animation: spin 2s linear infinite;    }.overlay {    background: #e9e9e9;               position: absolute;      top: 0;                    right: 0;                   bottom: 0;    left: 0;    opacity: 0.5;}@-webkit-keyframes spin {  0% { -webkit-transform: rotate(0deg); }  100% { -webkit-transform: rotate(360deg); }}
@keyframes spin {  0% { transform: rotate(0deg); }  100% { transform: rotate(360deg); }}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>    <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">  <a class="navbar-brand" href="#">Logo</a>  <ul class="navbar-nav">    <li class="nav-item">      <a class="nav-link" href="#">Link</a>    </li>    <li class="nav-item">      <a class="nav-link" href="#">Link</a>    </li>  </ul></nav>
<br><br><br><br><div class="overlay"><div class="loader"></div></div>
  <div id="newTable"></div>

How does one hide content from a user until a stylesheet is loaded and executed?

You can have the stylesheet hide specific elements as display: none until they are needed.

However, if you do this directly in the stylesheet you've got accessibility problems, as on a browser without JavaScript available the content will not appear at all. A way around this is to key the hiddenness on a variable that is set from JavaScript before any of the deferrable elements are loaded, for example as a class on <body>:

<head>
    <style type="text/css">
        body.withjs .deferred { display: none; }
    </style>
</head>
<body>
    <script type="text/javascript">
        $('body').addClass('withjs');

        $(document).ready(function() {
            // set up slideyness
        });
    </script>

    <p>Content that loads normally...</p>

    <div id="slideything" class="deferred">
        content
    </div>
</body>

Tabs - need content to be hidden on page load and revealed when clicked

Adding jQuery towards the end the body tag (in the code snippet it is the end of html code) solves your problem.

Please let me know if that is what you wanted to know.

Since your js code uses the jQuery library syntax, you need to add jQuery library like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

For the hiding part you can make the divs hide by:

div.a,
div.b {
  visibility:hidden;
}

And then in the js edit the visibility to visible on click

$('div.a, div.b').css("visibility","visible")

Visibility hides the content but the space will still be consumed.
If you want to let the invisible content take any space in the page, play with the "display" css property instead of visibility.

You can find the complete code below:

$('span.a, span.b').click(function() {  if (!$(this).hasClass('active')) {    $('span.a, span.b').removeClass('active');    $(this).addClass('active');    $('div.a, div.b').toggle();  }  $('div.a, div.b').css("visibility","visible")});

div {  margin-top: 40px;  width: 80%;  text-align: left;}div.a,div.b {  visibility:hidden;}

<center><span class="a active"> <img src="http://cornerstoneparking.portfolio.com.au/wp-content/uploads/2016/10/Customers.jpg" width="200"> </span>  <span class="b"> <img src="http://cornerstoneparking.portfolio.com.au/wp-content/uploads/2016/12/Landlords.jpg" width="200"></span>  <div class="a">Cornerstone Parking provides value for money parking in Brisbane’s CBD and surrounding suburbs. Our turn up and park rates (ie no need to pre-book) are often cheaper than other car park’s online discount rates and you can always be sure of getting a    bay in a Cornerstone car park. Our convenient and centrally located CBD car parks are run by our friendly staff and are predominantly located in the Adelaide Street, Ann Street and Creek Street areas. Our car parks offer discounted parking in large    bays with ample height clearance. We offer hourly (visitor) parking as well as monthly parking, early bird parking and motorbike parking in most of our car parks.</div>  <div class="b" style="display:none">Cornerstone Parking provides a high quality, professional and technology driven car park management service. A part of the Cornerstone Group, our property development and management heritage provides us with a true appreciation of landlord issues. Our    parent company backing means that Cornerstone Parking has the appetite and ability to participate in larger parking projects, including the development of new car parks. We provide owners, investors and developers with our car park management, advisory    and consultation services.</div></center><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Simplify this javascript for Show one, Hide Rest

I would probably try something like this:

Thumbnails like:

<li class="thumbnail" data-imageId="0">
  ...thumbnail...
</li>
<li class="thumbnail" data-imageId="1">
  ...thumbnail...
</li>
<li class="thumbnail" data-imageId="2">
  ...thumbnail...
</li>

Images like:

<div class="image" data-imageId="0">
  ...image...
</div>
<div class="image" data-imageId="1" style="display: none;">
  ...image...
</div>
<div class="image" data-imageId="2" style="display: none;">
  ...image...
</div>
<!-- The style attribute in these element hides the element by default,
     while still allowing jQuery to show them using show(). -->

And then the JS:

$(".thumbnail").click(function() {
   // Hides all images.
   $(".image").hide();

   // Shows appropriate one.
   var imageId = $(this).data("imageId"); // Fetches the value of the data-imageId attribute.
   $(".image[data-imageId="+imageId+"]").show();
});