$(document).ready()
和 window.onload
都是用来在文档或窗口加载完成后执行代码的方法,但它们之间存在一些关键的区别:
1. 触发时机:
- $(document).ready():这是jQuery提供的一个方法,它在DOM文档完全加载并解析完成后立即触发。它不等待样式表、图像和其他资源加载完成,只保证DOM完全就绪。
- window.onload:这是原生JavaScript的一个事件处理器,它在整个页面包括所有依赖项(如图像、样式表等)完全加载后才触发。这意味着使用
window.onload
时,页面上所有的内容都已经加载完毕。
2. 用途:
- $(document).ready():主要用于执行DOM操作和绑定事件处理器,因为它只需要DOM完全就绪即可。
- window.onload:通常用于需要等待页面上所有资源加载完成后才能执行的操作,比如初始化插件、执行一些资源加载后的计算等。
3. 依赖性:
- ** ( d o c u m e n t ) . r e a d y ( ) ∗ ∗ :依赖于 j Q u e r y 库。如果你的页面使用了 j Q u e r y ,那么使用 ‘ (document).ready()**:依赖于jQuery库。如果你的页面使用了jQuery,那么使用` (document).ready()∗∗:依赖于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
将更加合适。