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

Posted 2020-10-15 攻城狮小白

首先概念上分清楚这二者：其实从名称上就能很好的区分

(1)window对象javascript的BOM对象(表示浏览器窗口，用白话说就是你当前访问的这个网页)，所以window.onload表示的就是当前浏览器窗口(包括当前html网页上的所有资源：dom树、图片等)加载完成后，接下来才会执行里面写的js代码；

(2)document对象是javascript的DOM对象(表示文档对象模型，用白话说就是你当前访问的这个网页的整个dom树结构)，所以$(document).ready()表示的就是当前html网页上的dom树加载完成后，接下来才会执行里面的js代码。

<script type="text/javascript">
    //javascript源生js代码的入口函数的写法
    window.onload = function(){
        alert(1);
    }
    //jquery的js代码入口函数的写法($符号其实表示的就是jQuery这个对象,可以理解为给jQuery对象起了个别名，
    //像我们调用的$.post()、$.ajax()…等方法其实都是jQuery对象的方法)
    $(document).ready(function(){
        alert(2);
    })
</script>

所以上面两个哪个先执行，也就不言而喻了。虽然alert(2)是写在alert(1)后面的，但是dom树加载完成肯定是先于整个网页加载完成的。

下面再列下面试时谈这两个的区别时的几个小细节

(1)执行时机不同

　　window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
　　$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 

(2)可以写的个数不同

　　window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
       $(document).ready()可以同时编写多个，并且都可以得到执行 

(3)简化写法

　　window.onload没有简化写法
       $(document).ready(function(){})可以简写成$(function(){});

最后再说下可能会遇到的一种情况，当我们在页面中使用了$(document).ready(function(){})，当页面dom树加载完成后，function中的代码就会被执行，一般来说大部分情况都是没有问题的。

但是若有些时候，必须要等所有的元素都加载完毕，才可以执行一些方法的时候，比如说，部分图片或者其他什么还没有加载好，这个时候，点击某些按钮，会导致页面出现某些意料之外的

情况，load方法应该可以解决这个问题，不过没什么例子，以后有机会再补充。