javascript - document.ready vs document.onLoad - Stack Overflow

admin管理员组

文章数量:1356750

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';
     });
});

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';
     });
});

• javascript
• jquery
• onload
• document-ready

Share Improve this question Follow edited Jul 7, 2017 at 7:39 Marten Koetsier 3,55922 gold badges2828 silver badges3636 bronze badges asked Nov 16, 2012 at 16:43 doniyordoniyor 38k6161 gold badges181181 silver badges270270 bronze badges 4

• Are you resizing before the page loads? Your window.resize could be called before ready is set. – AJak Commented Nov 16, 2012 at 16:48
• @AJak ready and resize do the same thing, – doniyor Commented Nov 16, 2012 at 16:53
• @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 Commented Nov 16, 2012 at 16:53
• See also: stackoverflow./questions/8396407/… – cssyphus Commented Oct 3, 2015 at 5:28

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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 ;

本文标签： javascriptdocumentready vs documentonLoadStack Overflow