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

冷不防 2022-09-25 02:30 161阅读 0赞

**浏览器加载页面的顺序**

1.  解析HTML结构
2.  加载外部脚本和样式表文件
3.  解析并执行脚本程序
4.  构造HTML DOM结构 `ready`事件执行
5.  加载图片等组件
6.  页面加载完毕 `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事件之前执行的。