JS中的onload事件和jQuery中的ready事件，如何用JS实现jQuery中的ready

最新推荐文章于 2022-09-02 22:01:24 发布

旗smile

最新推荐文章于 2022-09-02 22:01:24 发布

阅读量591

点赞数 1

分类专栏： javascript 文章标签： javascript ready-load

本文链接：https://blog.csdn.net/u014346301/article/details/52130975

版权

javascript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

浏览器加载页面的顺序

解析HTML结构
加载外部脚本和样式表文件
解析并执行脚本程序
构造HTML DOM结构 ready事件执行
加载图片等组件
页面加载完毕 load事件执行

load事件： 在所有页面加载完毕执行，包括DOM、图片、iframe等组件。
ready事件 在DOM加载完毕后执行。
先来看一个实例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>load和jQuery</title>
<script src="plugs/jquery-2.2.3.min.js"></script>
</head>

<body>
<script>
window.onload=function(){
    console.log("第一个onload事件。"+new Date().getTime());
}
window.onload=function(){
    console.log("第二个onload事件。"+new Date().getTime());
}
window.onload=function(){
    console.log("第三个onload事件。"+new Date().getTime());
}
$(document).ready(function(e) {
    console.log("第一个ready事件。"+new Date().getTime());
});
$(document).ready(function(e) {
    console.log("第二个ready事件。"+new Date().getTime());
});
$(document).ready(function(e) {
    console.log("第三个ready事件。"+new Date().getTime());
});
</script>
</body>
</html>

这个实例的输出结果为：

第一个ready事件。1470496994362
第二个ready事件。1470496994368
第三个ready事件。1470496994368
第三个onload事件。1470496994371

在脚本中总送写了三个onload事件和三个ready事件，并且在每个事件输出时输出当时的毫秒数。从输出结果我们可以得出结论：

1. 执行时间不同
ready事件比load事件先执行，因为ready事件是在DOM加载完毕后执行，而load事件是在整个页面加载完毕后执行。
2.执行次数不同
ready事件可以被多次执行，而load事件只能执行一次，当定义多个load事件的时候后面的函数会覆盖前面的函数。

如何用原生的JS实现jQuery中的ready事件：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<body>
<script>
function ready(fn){
    if(document.addEventListener){
        document.addEventListener('DOMContentLoaded',function(){
            removeEventListener('DOMContentLoaded',arguments.callee,false);
            fn();   
        },false);
    }else if(document.attachEvent){
        document.attachEvent('onreadystatechange',function(){
            if(document.readyState == 'complete'){
                detachEvent('onreadystatechange',arguments.callee);
                fn();
            }
        });
    }
}
window.onload=function(){
    console.log("onload事件。"+new Date().getTime());
}
ready(function(){
    console.log("模仿ready事件。"+new Date().getTime());
});
</script>
</body>
</html>

执行程序输出的结果为：

模仿ready事件。1470546753908
onload事件。1470546753917

可以看出，以上代码中的ready事件是在load事件之前执行的。

旗smile

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录