$(document).ready() 与$(window).load()

虽说很早就开始接触JavaScript，自己也用JavaScript编写过许多代码，如之前的web版码表计时器，就写了近500行代码，函数也写了10个左右。当时也就是想到哪里就写到哪里，行不通就另外找方法，根本不会考虑代码的性能、作用及优化。

随着在实践中对JavaScript的应用，对JavaScript的认识也在不断地深入。这里，就为大家介绍一下$(document).ready()于$(window).load()的区别。

1.执行时间不同：

从字面的意思上理解，$(document).ready()就是文档准备好了。也就是浏览器已经解析完整个html文档，dom树已经建立起来了，这时就可以通过class属性或者id属性等等对dom进行操作等。而$(window).load()就是整个页面已经加载完毕。与前者的区别是dom树虽然已经建立起来了，但页面不一定加载完毕，如一些大的图片等，加载完成就需要一定的时间；但是页面加载完毕后，dom肯定也就建立起来了；但是有些文字或者图片链接等需要在文档加载完毕前，dom树建立后就进行的，这时就要用到$(document).ready()了。

2.可以被执行的次数不同：

$(document).ready()可以在JavaScript代码中出现多次，并且里面的函数或者代码都可以得到执行；而$(window).load()只能在JavaScript代码中出现一次，如果有多个$(window).load()，那么只有最后一个$(window).load()里面的函数或者代码才会执行，之前的$(window).load()都将被覆盖;

01 02 03 04 05 06 07 08 09 10 11 12 13 14

<script> $(document).ready(function(){ alert("test1");//这段代码会被执行 }); $(document).ready(function(){ alert("test2");//这段代码会被执行 }); $(window).load(function(){ alert("test1");//这段代码不会被执行 }); $(window).load(function(){ alert("test2");//这段代码将被执行 }); </script>

3.执行的效率不同：
如要在dom的元素节点中添加onclick属性节点，这时用$(document).ready()就要比用$(window).load()的效率高；但是在某些时候还必须得用$(window).load()才行，如之前写的app下载，如果要关闭这个下载框，则必须要在整个下载框加载完毕后，才能点击关闭图标，对app下载框执行隐藏。

01 02 03 04 05 06 07 08 09 10

<script> $(document).ready(function(){ $(".the_body a").attr("onclick","alert('test')"); }); $(window).load(function(){ $(".close_btn").click(function(){ $("#app_down").hide(); }); }); </script>