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

 

 

下面我简单记录一下在html中jquery里面的$(document).ready()和window.onload的区别，主要有三个不一样的方面：

 

• $(document).ready()比window.onload更快加载
• $(document).ready()有简写方式，window.onload没有简写
• $(document).ready()能够重复执行，window.onload只会执行一次

 

1、

$(document).ready()在dom文档树加载完以后执行一个函数（注意，这里面的文档树加载完不表明所有文件加载完）。window.onload是在dom文档树加载完和全部文件加载完以后执行一个函数。因此说$(document).ready要比window.onload先执行。

效果动图：

 

2、

$(document).ready()的简写格式是：$(function(){}),

window.onload没有简写

 

3、

同时在同一个HTML页面中使用多个$(document).rady(),函数会一次所有都执行。

同时在同一个HTML页面中使用多个window.onload，只会执行最后一个函数。

 

效果动图：

两个window.onload加载效果以下：

 

上面的效果图能够看到只有第二个onload加载出来了。

 

两个$(document).ready()加载效果以下：

能够看到上面效果图两个函数都相应的执行了

 

 

注：虽然这里我测试的执行的顺序是没问题的，可是有时候偶尔onload会比ready更早的执行，我也不知道什么缘由，但愿有大神能够帮我解答一下