document load 和 document ready 的区别

"document load" 和 "document ready" 都是 JavaScript 中用于处理文档加载事件的术语，但是它们之间有一些重要的区别。

document load

在传统的 JavaScript 中，document.load 事件是当整个 HTML 文档完全加载并出现在浏览器中时触发的。这意味着在此事件发生之前，可能有一些元素还未完全加载，比如图片、外部脚本、样式表等。因此，如果你在 document.load 事件处理器中尝试访问这些元素，可能会出现找不到的情况。

document ready

相比之下，document.ready（或者 jQuery 中的 $(document).ready()）事件是在 HTML 文档被完全加载和解析，并且所有依赖的样式表和图像都已完全加载之后才触发的。这意味着在此事件发生之后，所有在文档中的元素都可以被安全地访问。

在实际编程中，我们通常更倾向于使用 "document ready"，因为它能确保当我们尝试访问页面上的元素时，这些元素已经存在并可用。

代码示例

这是一个简单的示例，展示了如何使用这两种事件：

// 使用 document.load 事件
document.load = function() {
var img = document.getElementById('myImage');
console.log(img.src); // 如果图片还未加载，这里可能会出错
}

// 使用 document.ready 事件（jQuery 示例）
$(document).ready(function() {
var img = $('#myImage')[0];
console.log(img.src); // 确保图片已经加载，所以这里不会出错
});

请注意，在这个例子中，如果在 document.load 事件发生时图片还未加载，那么尝试获取图片的 src 属性将会失败，因为那时图片元素还不存在。然而，在 document.ready（或 jQuery 中的 $(document).ready()）事件发生时，图片已经被加载，因此可以安全地获取其 src 属性。