Email Email - 23 days ago 8
Javascript Question

Hide page until everything is loaded Advanced

I have a webpage which heavily makes use of jQuery.

My goal is to only show the page when everything is ready.

With that I want to avoid showing the annoying page rendering to the user.

I tried this so far (

#body_holder
is a wrapper inside body):

$(function(){
$('#body_holder').hide();
});
$(window).load(function() {
$("#body_holder").show();
});


This works completely fine, but messes up the layout.

The problem is that hiding the wrapper interferes with the other jQuery functions and plugins used (eg layout-plugin).

So I guess there must be another trick to do this. Maybe lay a picture or div over the body until window.load has occurred?

What approaches do you use?

EDIT:

The solution most likely has to be another way than
display:none
or
hide()
;

Answer

You should try setting visibility to hidden instead of display:none. Setting visibility to hidden will retain all elements positions and dimensions, thus it shouldn't create layout problems.