$(document).ready()与window.onload的区别

$(document).ready() 和 window.onload 都是用来在文档或窗口加载完成后执行代码的方法，但它们之间存在一些关键的区别：

1. 触发时机：

• $(document).ready()：这是jQuery提供的一个方法，它在DOM文档完全加载并解析完成后立即触发。它不等待样式表、图像和其他资源加载完成，只保证DOM完全就绪。
• window.onload：这是原生JavaScript的一个事件处理器，它在整个页面包括所有依赖项（如图像、样式表等）完全加载后才触发。这意味着使用window.onload时，页面上所有的内容都已经加载完毕。

2. 用途：

• $(document).ready()：主要用于执行DOM操作和绑定事件处理器，因为它只需要DOM完全就绪即可。
• window.onload：通常用于需要等待页面上所有资源加载完成后才能执行的操作，比如初始化插件、执行一些资源加载后的计算等。

3. 依赖性：

• **$(document).ready()\ast \ast ：依赖于jQuery库。如果你的页面使用了jQuery，那么使用‘$(document).ready()`会更加方便。
• window.onload：不依赖于任何外部库，是纯JavaScript的一部分，可以在不使用任何库的情况下使用。

4. 兼容性：

• $(document).ready()：由于依赖于jQuery，如果用户浏览器中没有jQuery，这个方法将不会工作。
• window.onload：作为原生JavaScript的一部分，它在所有现代浏览器中都是兼容的。

5. 使用方式：

// 使用jQuery的$(document).ready()
$(document).ready(function() {
    // DOM ready
    console.log('DOM is ready');
});

// 使用原生JavaScript的window.onload
window.onload = function() {
    // Everything is loaded
    console.log('Page is fully loaded');
};

总结：

选择使用$(document).ready()还是window.onload取决于你的具体需求。如果你只需要确保DOM已经加载完成，并且正在使用jQuery，那么$(document).ready()是一个更好的选择。如果你需要等待页面上的所有资源都加载完成，或者不使用jQuery，那么window.onload将更加合适。