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

Question

I need to recalculate the height of the main body of the body, than wait until all the content (images) is loaded, and show it to the site visitor.
I used jQuery and CSS for this

//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, the height of the calculations works, but it seems that the body is not hiding, because all the images are loaded, as usual, they should. In Opera, both functions do not work. The page does not appear when all the content is loaded, and the calculations do not work. You would better understand what I'm talking about: [The site on which this problem is] [1]

[1]: not relevant

Thanks for your answer, brgds

Answer 1

You need to understand the difference between $ (document) .ready () and the normal load event (which is mainly related to $ (window) .load ()).

The document readiness event occurs when the entire document is ready to interact with JavaScript - all HTML and JavaScript are loaded. Most likely, not all images are uploaded, whether CSS is uploaded and applied are somewhat vague (browsers do this a little differently).

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

It’s better to work in Opera if I’m sure that this is done at boot time, and not document.ready.

(Another problem is that Opera does not load images inside the display: none content - until you actually change the display so that the images are needed. This improves download performance, but sometimes means that the user has to wait for images to load when additional content shown in the figure.)

Answer 2

Try it:

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

but not:

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

Answer 3

The best solution is to specify the height and width of your images in html. Then you do not need window.load, because they will not change in height.

I also think that Sarfraz’s thing is that you should not put window.load inside document.ready. They should be on the same level.