0

I have an html page containing a lot of table data, a css page with some styles, and some javascript pages with things like sorting and filtering and such.

When I click on the page, I see elements appear and then adjust as it loads. For example, the table headers start a particular size, then adjust to a different size.

I'd like the elements to appear their final appearance and location. Whether this means the entire page loading at once, or each element somehow loading their final appearance somehow one at a time, I'm ok with either.

Is this possible? Thanks!

user38858
  • 306
  • 4
  • 14

2 Answers2

1

If you want to do it, i don't recommend it, I find it annoying, use JS or JQuery:
JQuery:

   $(window).load(function(){
       $('.overlay').fadeOut();
    });

HTML:

<noscript><style>.overlay{display:none;}</style></noscript>
<div class="overlay">Loading...</div>

CSS:

.overlay{
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
background:#222021;
color:white;
z-index:999;
}

When the page loads, the overlay fades away.

JSFiddle Demo

Jacob G
  • 13,762
  • 3
  • 47
  • 67
0

I am not sure but... try linking yor CSS files inside the labels. I think this way the CSS files are loaded before all the content in .

Bustikiller
  • 2,423
  • 2
  • 16
  • 34