Home/ Questions/Q 768203
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T18:08:43+00:00

I need to recalculate body’s main div height, than wait while all content (images)

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.)

    • 0