javascript - document.ready 与 document.onLoad

Question

我想知道哪个是运行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';
     });
});

Answer 1

准备就绪

当您在文档准备就绪时运行代码，这意味着 DOM 已加载 - 但不是图像之类的东西。如果图像会影响高度和宽度并且图像标签没有设置宽度和高度，则 ready 不是您的选择 - 否则它可能是。

加载

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

两者

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 ;