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);

为什么这份文件准备不及时

1 个答案: