document.ready vs document.onLoad

时间:2012-11-16 16:43:49

标签: javascript jquery onload document-ready

我想知道哪一个是正确的运行js代码,根据窗口高度计算垂直菜单的高度并按时设置,而不是迟到,而不是早。

我正在使用document.ready,但它并没有真正帮助我解决这个问题,有时候没有设置,我必须重新加载页面,然后它正在工作,但不是第一次加载。

如何解决这个问题?

这是我的代码:

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

1 个答案:

答案 0 :(得分:5)

<强>就绪

当文档准备就绪时运行代码时,意味着DOM已加载 - 但不是像图像那样。如果图像会影响高度和宽度,并且图像标签没有设置宽度和高度,那么就不能选择就绪 - 否则它可能就是。

<强>的onload

这包括图像 - 所以一切都将被加载。这意味着它会稍后发射。

<强>两个

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 ;