您的位置：首页 > Web前端 > JQuery

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

2016-04-06 14:12 656 查看

首先介绍下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){//兼容非IE
document.addEventListener("DOMContentLoaded",function(){
//注销事件，避免反复触发
document.removeEventListener("DOMContentLoaded",arguments.callee,false);
fn();//调用参数函数
},false);
}else if(document.attachEvent){//兼容IE
document.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()与[b]$(window).load()主要区别[/b]

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

$(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>

测试结果;

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航