Tips for gracefully loading a web page?

Question

I have a web page that has a lot of content that is hidden/shown/styled when the page is in various states using jQuery/javascript. I am running into an issue where on the

Answer 1

You can set the CSS display:none and visibility:hidden by default to your hidden elements.

Answer 2

what about adding overlay and hide it when page load complete? :) try to add a div with id overlay or it's up to you, and style it like this :

#overlay{
  width:100%;
  height:100%;
  position:fixed;
  top:0; left:0;
  z-index:99
}

this will hide all of your content. and after webpage load complete, hide it with jquery :

$(window).load(function(){
  $('#overlay').animate({opacity:'0'}).css('zindex','-10');
})

Answer 3

This is known as a FOUC - a flash of unstyled content.

A fairly standard way is to hide the content by default in your css and then once all the manipulation using javascript has been done show the elements again.

However, rather than aiming for graceful degradation you may consider trying for progressive enhancement to enable javascript to add functionality to your site rather than relying on it for the functionality and appearance.
See here for a good blog post on the relative merits of the two approaches.

Answer 4

Use CSS to set the initial display state to hidden (display:none or visibility:hidden, as appropriate) and jQuery/JavaScript to show them later (either by direct styling or changing classes such that they appear.