document.ready vs 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已加載 - 但不是像圖像那樣。 如果圖像會影響高度和寬度，並且圖像標簽沒有設置寬度和高度，那么就不能選擇就緒 - 否則它可能就是。

負載

這包括圖像 - 所以一切都將被加載。 這意味着它會稍后點火。

都

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 ;