实现在html页面加载之前执行js方法

浏览器对html页面内容的加载是顺序加载，也就是在html页面中前面先加载，因此当加载到JS脚本时，JS是一种解释性的脚本，也是从上而下顺序执行，由于这段JS代码是立即执行的。

• 第一种方式是把方法写在head中(推荐)

  让它顺序执行的时候去执行。

• 第二种方式是使用body的onload方法

• 第三种方式是使用$(document).ready()

引用

JQuery 中用得最多的要属工厂函数 $() 了，下面我们就来看一下它的初步应用。

大家知道，在 JQuery 中我们可以使用 $(document).ready(); 在其中加入页面加载后的代码，以便做出丰富的页面行为。

它和传统的 JS 中的 onload 有什么区别呢？

onload ready 没有简写方式 具有简写方式 当 HTML 页面所有内容加载完毕后才执行 onload 当 DOM
节点加载完毕后就执行 ready 一个 HTML 页面只能编写一个 onload 一个 HTML 页面允许同时编写多个 ready

传统的 window 的 onload 程序如下：

window.onload = function() { }

它是在整个页面完全被加载之后执行。

这样做最大的一个缺点就是速度问题，onload 中的代码不仅是在构建 DOM 树之后，而且是在所有图像和其它外部资源被完整地加载

并在页面浏览器窗口显示完毕之后才执行。

而 $(document).ready() 最大地优点就是在浏览器构建 DOM 树之后立即执行其中的代码。

(document).ready()的写法比较正式，用得比较多的写法还可以是：(), 你可以在括号中直接加你的匿名函数，如下：

$(function() { });

和

$(document).ready(function() { });

或

$().ready(function(){ });

都是正确的。