JavaScript window.onload()、 jQuery ready()

一、window.onload() 方法

• window.onload() 方法用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法。
• window.onload() 通常用于 元素，在页面完全载入后(包括图片、css文件等等)执行脚本代码。

语法：

window.onload = function(){
    Funa1();
    Funa2();  
    Funa3();
    .....
}
// 页面加载会依次执行 Funa1,Funa2,Funa3 直到结束

但是一个html页面中有多个window.onload()函数时：只会输出 你好呀！

这个时候只会执行最后一个window.onload()函数，后面的一直覆盖前面的

window.onload=function(){
     document.write('你好呀');
};
window.onload=function(){
    document.write('你好呀！');
};
// 你好呀！

为什么要使用window.onload()

加粗样式因为 JavaScript 中的函数方法需要在 HTML 文档渲染完成后才可以使用，如果没有渲染完成，此时的 DOM 树是不完整的，这样在调用一些 JavaScript 代码时就可能报出 “undefined” 错误。
如果这个时候使用 window.onload() 给事件添加函数，就可以正常执行里面的 js 代码
window.onload 事件绑定事件处理函数，绑定的是一个匿名函数，当然也可以绑定具名函数,或者里面执行多个函数
① 具名函数

<script type="text/javascript">
// 函数名为 runDemo
window.onload=function runDemo(){
  document.write("今天天气真不错，我们一起去嗮一会太阳吧！");
}
</script> 

② 执行多个函数

<script type="text/javascript">
window.onload=function(){
    function runDemo1(){
        document.getElementsByTagName("div").style.backgroundColor="#F00";
    }
    function runDemo2(){
        document.getElementsByTagName("div").style.width="100px";
        document.getElementsByTagName("div").style.height="100px";
    }
    runDemo1();
    runDemo2();
}
</script>

二、jQuery ready()

• 当 DOM 加载完毕且页面完全加载（包括图像）时发生 ready 事件；
• 由于该事件在文档就绪后发生，因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法

语法：

①标准写法：

$(document).ready(function(){
    // 执行代码
});

② 简写

$(function(){
    // 执行代码
});

window.onload 与 jQuery ready() 区别

ready() —— 只是 DOM 树加载完毕后执行，一些img等资源可能还没加载完成；

onload() —— 则是网页中所有内容加载成功（包括图片）；

ready() 方法可以有多个，而 onload() 只能写一个。