JQuery_$(document).ready() 与 $(window).load()方法比较

本文主要是介绍JQuery_$(document).ready() 与 $(window).load()方法比较，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

首先介绍下HTML文档加载顺序：

① 解析HTML结构

② 加载外部脚本和样式表文件

③ 解析并执行脚本代码

④ 构造HTML DOM模型

⑤ 加载图片等外部文件

⑥ 页面加载完毕

Jquery页面加载中的几个主要函数

$(document).load();

当web页面以及其附带的资源文件，如CSS，Scripts，图片等，加载完毕后执行此方法。
常用于检测页面（及其附带资源）是否加载完毕。

$(document).ready();
当页面DOM对象加载完毕，web浏览器能够运行JS时，此方法即被触发。如果你想尽快执行JS，可以使用此方法。[在html的头部的script标签中的，不处于ready()中的JS代码将早于ready()执行]

$(document).unload();
此事件在停止浏览页面的时候触发，此操作可能存在于刷新操作/F5，单击上一页按钮，进入其他页面或关闭整个tab或窗口。

总而言之，他们的调用顺序是 ready() >> load() >> unload() 。

一 $(document).ready()

方法介绍：

JQuery的ready事件实际上是对IE的readystatechange事件和DOM的DOMContentLoaded事件进行封装，这两事件都是在DOM树结构下载并解析完毕后触发。

封装原形与分析：http://blog.csdn.net/lidiansheng/article/details/8008158

主要源码：

 <script>var $ = ready = window.ready = function(fn){if(document.addEventListener){//兼容非IEdocument.addEventListener("DOMContentLoaded",function(){//注销事件，避免反复触发document.removeEventListener("DOMContentLoaded",arguments.callee,false);fn();//调用参数函数},false);}else if(document.attachEvent){//兼容IEdocument.attachEvent("onreadystatechange",function(){if(document.readyState==="complete"){document.detachEvent("onreadystatechange",arguments.callee);fn();}});}}$(function(){alert("ok1");});</script>

如果定义多个$().ready()函数则会按照顺序执行

如：

$(document).ready(function(){ 
alert(“Hello World”); 
}); 
$(document).ready(function(){ 
alert(“Hello again”); 
});

结果两次都输出

执行时间：

$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。也就是不会等到图片，Flash全部加载完成后执行。

简写方法：

$(document).ready()过于冗长，有以下几种简写方法

复制代码代码如下:

$(function(){
// do something
});

其实这个就是jq ready()的简写，它等价于：

复制代码代码如下:

$(document).ready(function(){
//do something
})

也等于下面这个方法，jQuer的默认参数是：“document”；

复制代码代码如下:

$().ready(function(){
//do something
})

二 $(window).load()

方法介绍：

$(window).load(function(){ }) 等同于原生的 javascript 中 window.onload = function (){ }

但是也有一定的区别，

$(window).load 可以加载多个函数，如：

        $(window).load(function(){alert("加载中");});$(window).load(function(){console.log("打印4");});

window.onload 不能定义多个函数，若想执行多个函数，需要这样编写代码：

window.onload =function() { t(); b(); }

这里有一篇博文介绍了如何让onload 执行多个event, http://www.cnblogs.com/jhxk/articles/1660528.html

ps:怕博文被删，自己先备份一篇吧

执行时间：

必须等待网页中所有的内容加载完毕后 ( 包括图片 ) .

简写方法：

一般写法

$(window).load(function (){ 
//do something
});

三 $(document).ready()与$(window).load()主要区别

由上面的栗子我们已经可以清楚的看到两个方法的主要区别在于：

$(window).load()必须等到页面内包括图片的所有元素加载完毕后才能执行。

$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

测试代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Onload和Ready的测试</title><script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script><script>$(window).load(function(){alert("加载中");});$(window).load(function(){console.log("打印4");});$(window).load(function(){console.log("打印5");});$(function(){console.log("打印1");});$().ready(function(){console.log("打印2");});$(document).ready(function(){console.log("打印3");});</script>
</head>
<body><div style="height:200px; width:auto; background-repeat:no-repeat; background-image: url(../img/src1.jpg);"></div><img src="../img/src1.jpg"/>
</body>
</html>

测试结果;