window.onload
和 document.ready
是JavaScript中两种常见的页面加载事件,但它们在何时触发以及如何使用上有所不同。
- window.onload: 这是一个事件,它会在整个页面(包括所有依赖资源,如图片,CSS,JavaScript文件等)完全加载后触发。也就是说,
window.onload
事件是在网页中所有元素完全加载到浏览器后才触发的。因此,如果页面中有一些大的资源文件需要加载,window.onload
可能会有一些延迟。示例:
window.onload = function() { // Your code here };
-
document.ready: 这个事件是jQuery库中的一个特性,当DOM(文档对象模型)结构加载完毕后就会触发,不必等待所有的内容(如图片)加载完毕。换句话说,当HTML文档已经完全加载和解析,不需要等待样式表、图像和子框架的完成加载,
document.ready
就会被触发。示例
$(document).ready(function() { // Your code here });
总结一下,
window.onload
是在整个网页完全加载完成后才触发,包括所有的资源文件;而document.ready
则是在DOM结构加载完成后就会触发,不必等待所有的资源文件加载完成。这就是它们的主要区别。