请指出document.onload和document.ready两个事件的区别？

JavaScript面试题 5月前 0 55

document.onload 和 document.ready 这两个事件在 JavaScript 中常被用于确定页面何时准备好运行脚本，但它们的触发时间并不相同：

document.onload：这是一个浏览器事件，它会在整个页面完全加载后触发，包括所有的图片、CSS、脚本文件、iframe等。因此，如果一个网页包含了大量的内容（例如大图片或视频），document.onload 事件可能需要较长时间才能触发。

window.onload = function() {
    // 页面所有内容（包括图片、CSS、脚本文件等）都已完全加载
    console.log("Page fully loaded");
};

document.ready：这是 jQuery 库中的一个事件，它会在 DOM 完全加载和解析后就触发，无需等待样式表、图像和子框架的完成加载。这意味着，当我们可以开始操作 DOM 时，document.ready 就会触发，这通常比 document.onload 更早。

$(document).ready(function() {
    // DOM 已完全加载和解析，无需等待其他内容
    console.log("DOM ready");
});

所以，如果你的 JavaScript 代码需要操作 DOM 元素，但并不需要等待所有的图片、CSS 和其他资源完全加载，那么使用 document.ready 通常是更好的选择。