js的onload

区别一：执行时间不同

window.onload()是在页面所有元素（包括图片，引用文件）加载完成后再执行。也就是说页面所有的东西都加载完成之后再加载。
$(document).ready()是DOM结构绘制完毕就执行，不必等到加载完毕，意思就是，DOM数加载完毕，不必等到页面中的图片或其他外部文件都加载完毕。所以$(document).ready()执行更快

区别二：编写个数不同

window.onload()同时编写多个，在执行的时候，只会执行最后一个。也就是说只执行一次。
$(document).ready()编写多个，就执行多个

区别三：有无简写

window.onload()没有简写的方式
$(document).ready()简写 $(function(){})

<body>
    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    </ul>
 </body>
<script>
//只会执行最后一个
window.onload = function(){
  console.log('window.onload加载1');
}
window.onload = function(){
  console.log('window.onload加载2');
}
window.onload = function(){
  console.log('window.onload加载3');
}

//全部都会执行
$(document).ready(function(){
  console.log('$.ready加载1');
})
$(document).ready(function(){
  console.log('$.ready加载2');
})
$(document).ready(function(){
  console.log('$.ready加载3');
})
</script>

image.png

注意：

如果需要获取DOM绑定元素的属性值时，最好使用window.onload，因为他是在所有元素加载完毕才执行，如果使用$(document).ready，DOM已经加载，但是DOM绑定的元素属性没有加载，所以属性不生效。
要解决这个问题，可以使用 Jquery 中另一个关于页面加载的方法 ---load() 方法。
Load() 方法会在元素的 onload 事件中绑定一个处理函数。如果处理函数绑定给 window 对象，则会在所有内容 ( 包括窗口、框架、对象和图像等 ) 加载完毕后触发，如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。

//jQuery代码
$(window).load(function(){

})
//等价于
window.onload = function(){
}

当 onload 事件触发时，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了。

当 DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash。

我们需要给一些元素的事件绑定处理函数。但问题是，如果那个元素还没有加载到页面上，但是绑定事件已经执行完了，是没有效果的。这两个事件大致就是用来避免这样一种情况，将绑定的函数放在这两个事件的回调中，保证能在页面的某些元素加载完毕之后再绑定事件的函数。

当然DOMContentLoaded机制更加合理，因为我们可以容忍图片，flash延迟加载，却不可以容忍看见内容后页面不可交互。

在没有出现DOMContentLoaded事件出现以前，许多类库中都有模拟这个事件的方法，比如jQuery中著名的 $(document).ready(function(){});