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

最新推荐文章于 2024-05-13 15:29:24 发布

高达一号

最新推荐文章于 2024-05-13 15:29:24 发布

阅读量8.6k

点赞数 4

分类专栏： JQuery基础知识文章标签： jquery jquery ready ready onload jquery onload

本文链接：https://blog.csdn.net/u010003835/article/details/51073543

版权

JQuery基础知识专栏收录该内容

10 篇文章 0 订阅

订阅专栏

首先介绍下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()与$(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>

测试结果;

高达一号

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JQuery_$(document).ready() 与 $(window).load()方法比较

$(document).ready() JQuery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法，不过与window.onload方法还是有区别的。执行时间：$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。也就是不会等到图片，Flash全部加载完成后执行。 $
复制链接

扫一扫