window.onload 与 document.ready jQuery答案

【问题标题】：window.onload vs document.ready jQuerywindow.onload 与 document.ready jQuery
【发布时间】：2012-06-02 10:22:45
【问题描述】：

我有一个包含两列的网站。我想使用 jQuery 在两者上具有相同的高度。

我正在尝试获取徽标列的高度。我有：

$(document).ready(function() {
    alert($('#logo').height());
});

它没有工作。所以我把它改成：

window.onload = function(){
    alert($('#logo').height());
}

而且它正在工作。这是怎么回事？

【问题讨论】：

【解决方案1】：

document ready 在 DOM 加载时被触发，因此高度等信息不可用，除非明确声明。

window onload 等待页面中的资源完全加载 - 因此高度等信息现在可用。

【讨论】：

【解决方案2】：

我在处理 $(document)ready 中的图像高度和宽度时遇到了同样的问题，我找到了一些更好的参考来解决它......我希望这可以帮助一些人

$(document).ready()

当 HTML 文档被加载并且 DOM 就绪时触发文档就绪事件，即使所有的图形还没有加载。如果您想在窗口加载之前为某些元素关联事件，那么 $(document).ready 是正确的地方。

代码：

$(document).ready(function() {
    // document is loaded and DOM is ready
    alert("document is ready");
});

$(window).load()

窗口加载事件稍后触发，当整个页面完全加载时，包括所有框架、对象和图像。因此，涉及图像或其他页面内容的函数应放置在窗口或内容标签本身的加载事件中。

代码：

$(window).load(function() {
    // page is fully loaded, including all frames, objects and images
    alert("window is loaded");
});

【讨论】：