2

可能重复：
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);
});

感谢您的意见和时间！

4

1 回答 1

3

你应该陷进去$(window).on('load', ...)而不是$(document).ready.

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

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

$(window).on('load resize', calculateSize);
于 2012-12-19T19:18:49.963 回答