浅谈JavaScript中的window.onload方法和JQuery中的$(document).ready()方法

浅谈JavaScript中的window.onload方法和JQuery中的$(document).ready()方法

这两个方法功能很相似，但在使用过程中却有细微的区别，具体如下：

一、执行时机

window.onload方法是在网页中所有的元素（包括元素的所有关联文件）完全加载到浏览器后才执行，在此之后JavaScript才可以访问网页中的元素。

而通过$(document).ready()方法注册的事件，只需要DOM完全就绪就可以被调用了。这就意味着，不需要等到网页的所有资源都加载完毕，只要网页的DOM树加载完，就可以对元素进行操作了，这将极大地提高事件的处理速度，并很好地提高了用户体验（用户看到元素的时候，就能立即看到元素产生的一些隐藏效果、显示效果或者其他的效果等）。

二、多次使用

当重复调用window.onload方法时，会产生“覆盖”现象，举例说明一下：



如上图的代码，是想输出test1和test2，但是结果却只是输出了test2，原因是onload方法一次只能保存对一个函数的引用，所以此机制自动用后者覆盖了前者的alert方法。对于此例子而言，可以另写一个方法分别调用这两个方法，再用onload来调用，即可达到目的，但是，一旦你的代码多起来了，用这样的解决方案显然不明智。

对于这个问题，(document).ready()方法有了很好的解决方案，当需要执行多个行为时，(document).ready()方法的机制不是覆盖而是追加，这就从根本上解决了问题。代码如下图：