document.ready vs document.onLoad

Question

I am wondering which one is the right one to run the js code which calculates the height of vertical menu depending on the window height and sets it on time, not late, not early.

I am using document.ready but it is not really helping me with the issue, it is not setting sometimes, I have to reload the page, then it is working, but not on the first load.

How to solve this problem?

Here is my code:

$(document).ready(function(){
     var winh = document.body.clientHeight;
     var footer = document.getElementById('footer').offsetHeight;
     document.getElementById('sidebar').style.height = winh - 5/2*footer + 'px';
     document.getElementById('sidebar').style.marginBottom = footer + 'px';

     $(window).resize(function(){
         var winh = document.body.clientHeight;
         var footer = document.getElementById('footer').offsetHeight;
         document.getElementById('sidebar').style.height = winh - 5/2*footer + 'px';
         document.getElementById('sidebar').style.marginBottom = footer + 'px';
     });
});

Are you resizing before the page loads? Your window.resize could be called before ready is set. — AJak, Nov 16 '12 at 16:48
@AJak although the tabbing in the example is wrong, the resize event is being added in the `ready` function, so it can't fire before the preceding code. — Fenton, Nov 16 '12 at 16:53
**See also:** http://stackoverflow.com/questions/8396407/jquery-what-are-differences-between-document-ready-and-window-load — cssyphus, Oct 03 '15 at 05:28

score 6 · Accepted Answer · answered Nov 16 '12 at 16:52

6

ready

When you run code when the document is ready, it means the DOM is loaded - but not things like images. If images will affect the height and width and the image tag has no width and height set, ready isn't the choice for you - otherwise it probably is.

onload

This includes images - so everything will be loaded. This means it fires a bit later.

both

var calculateSize = function () {
     var winh = document.body.clientHeight;
     var footer = document.getElementById('footer').offsetHeight;
     document.getElementById('sidebar').style.height = winh - 5/2*footer + 'px';
     document.getElementById('sidebar').style.marginBottom = footer + 'px';
}

$(document).ready(function(){
    calculateSize();

     $(window).resize(calculateSize);
});

window.onload = calculateSize ;

answered Nov 16 '12 at 16:52

Fenton

241,084
71
387
401

great, this should be the answer, let me try first :D – doniyor Nov 16 '12 at 16:54
i put all this code in one – doniyor Nov 16 '12 at 16:59
Any reason `$(window).resize(calculateSize)` is inside `document.ready`? Why not simply: `$(document).ready(calculateSize); $(window).on('resize load', calculateSize)`? – Joseph Silber Nov 16 '12 at 17:09
@JosephSilber good question. Depends if you want to listen to resizes before the DOM is ready. It's probably an edge case. – Fenton Nov 16 '12 at 18:25

document.ready vs document.onLoad

1 Answers1

Linked