Email Email - 5 months ago 32
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 (

is a wrapper inside body):

$(window).load(function() {

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?


The solution most likely has to be another way than


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.