javascript - 为什么这个 document.ready 没有按时触发

Question

Possible Duplicate:
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);