为什么这个 document.ready 没有按时触发 [重复]

Question

可能重复：
window.onload vs document.ready jquery

我遇到了这个问题：我在页面上有一张不是那么大的图片。我有一个 js 函数，它根据内容的高度和窗口的大小动态设置左侧边栏的高度。所以如果我调整页面大小，侧边栏也会动态调整大小。但是现在，侧边栏的高度设置得很早，最终设置不正确。该设置将发生在 ```document.ready`` 函数中，该函数应该在所有 DOM 准备好（包括图像）后触发，对吗？

这是我的页面，请在 chrome 中打开，您会更清楚地看到问题。 http://www.stahlbaron.de/standort/

这是我动态设置侧边栏的 js 函数。

<script type="text/javascript">
   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);
});

感谢您的意见和时间！

Answer 1

您应该使用$(window).on('load', ...) 而不是$(document).ready。

前者等待图像（和所有其他内容）加载，而后者只等待代表 HTML 源代码中元素的 DOM 树被创建。

由于您希望在调整大小时调用相同的函数，您可以结合事件注册：

$(window).on('load resize', calculateSize);