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

来源：互联网发布：心事谁人知葫芦丝编辑：程序博客网时间：2024/06/06 02:12

执行时间不同

$(document).ready()是在浏览器已经解析完整个html文档，dom树已经建立起来，但像图片等资源文件还没有加载之前的时候执行的。

window.onload是在整个页面所有元素（包括图片，引用文件）加载完成后执行。

综上所述，可知，ready是在load之前执行。

在此说明一下$(document).ready()的简写形式：$(function(){})

<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>onload ready 加载顺序</title><script type="text/javascript" src="jquery.min.js"></script></head><body><img src="https://img.alicdn.com/imgextra/i1/738517069/TB2mpLRnr4npuFjSZFmXXXl4FXa_!!738517069.jpg" width="100px" height="100px"/></body><script type="text/javascript">window.onload=function(){console.log("window onload");};$(document).ready(function(){console.log("document ready");});</script></html>

结果：

document ready

window onload

执行次数不同

$(document).ready()可以在javascript代码中出现多次，并且里面的函数或代码都可以得到执行。

window.onload只能在javascript代码中出现一次，如果有多个window.onload,那么只有最后一个window.onload里面的函数或代码才会被执行，之前的window.onload都将被覆盖。

此处提一下jQuery中的$(window).load(function(){})，功能和window.onload一样，但它可以在javascript代码中多次出现，每个都会被执行。

onload代码也可以作用于标签上：如：

<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>onload ready 加载顺序</title><script type="text/javascript" src="jquery.min.js"></script></head><body><img src="https://img.alicdn.com/imgextra/i1/738517069/TB2mpLRnr4npuFjSZFmXXXl4FXa_!!738517069.jpg" width="100px" height="100px"/></body><script type="text/javascript">window.onload=function(){console.log("window onload1");};window.onload=function(){console.log("window onload2");};window.onload=function(){console.log("window onload3");};window.onload=function(){console.log("window onload4");};$(window).load(function(){console.log("window load1");});$(window).load(function(){console.log("window load2");});$(function(){console.log("document ready1");});$(function(){console.log("document ready2");});$(function(){console.log("document ready3");});$(function(){console.log("document ready4");});</script></html>

结果：

document ready1

document ready2

document ready3

document ready4

window onload4

window load1

window load2

总结

一般建议能用$(document).ready()的不用window.onload,这样整个html页面的交互感要好，不会因为加载图片太慢，阻碍js的执行。但有些情况，可能要等页面的所有东西都加载完成后才可执行，此时就必须选用window.onload。

阅读全文

1 0