$(window).load(function(){}); problem in Opera

Question

Hello. I need to recalculate body's main div height, than wait while all content (images) loads and only than show it to site visitor.
To achieve this i used jQuery and CSS

//CSS looks like
body {display: none;}


/* div block height calculator */
function recalculateHeight(id, add){
 var height = $(id).height();

 if (height < 650) height = 650;

 if (add)
  height = height + add;

 $('#left_div').height(height);
 $('#center_div').height(height);
 $('#right_div').height(height);
}
//recalculate height when page is fully loaded
$(document).ready(function(){
 $(window).load(function(){
  $('body').show();
  recalculateHeight("#center_div");
 });
});

Everything works fine in IE, Firefox, Safari. In Chrome height calculation works, but seems that body doesn't hides, because all images loads as usual they should. In Opera, both functions doesn't work. Not page is showed when all content is loaded, not page calculation works.
You would better understand what I am talking about: [Site where this problem is][1]

[1]: not actual

Thanks for Your response, brgds

Answer 1

Try this actually:

//recalculate height when page is fully loaded
 $(window).load(function(){
  $('body').show();
  recalculateHeight("#center_div");
 });

rather than:

$(document).ready(function(){
 $(window).load(function(){
  $('body').show();
  recalculateHeight("#center_div");
 });
});

Answer 2

A better solution is to specify the height and width of your images in the html. Then you don't need window.load because they won't change in height.

Also I think the point that Sarfraz was making is that you shouldn't put window.load inside document.ready. They should both be at the same level.

Answer 3

You need to understand the difference between $(document).ready() and a normal load event (which is basically what $(window).load() would work with).

The "document ready" event occurs when the entire document is ready for JavaScript interaction - all the HTML and JavaScript is loaded. Most likely, not all images are loaded, whether CSS is loaded and applied is somewhat uncertain (browsers do this a bit differently).

For these reasons, doing something that requires layout/size calculations from $(document).ready() is not a good idea. In this case you'll try to read the size of the document before all the images are loaded - so you get the size as it is before the browser knows what the size will be when it knows the size of all images.

It seems to work just fine in Opera here if I make sure this is done on load event rather than document.ready.

(Another issue is that Opera does not load images inside display:none content - until you actually change display so that the images are required. This improves loading performance but sometimes means the user has to wait for images loading when extra content is shown.)