DOM加载过程中ready和load的区别
Posted 赵小生的技术博客
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DOM加载过程中ready和load的区别相关的知识，希望对你有一定的参考价值。
在浏览器地址栏输入URL地址，浏览器开始加载页面时，有以下几个过程
1、浏览器开始解析html文档
2、 浏览器遇到HTML文档中的<script>元素以及CSS样式文件，并且没有async或defer属性，就暂停解析，开始执行脚本和CSS样式
3、 HTML文档解析完成
4、 浏览器等待图片、样式表、字体文件等外部资源加载完成
在这其中，有两个阶段：
ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件）；
load，表示页面包含图片等外部文件在内的所有元素都加载完成。
DOM Ready
严格来说，ready并不是DOM中的事件，只是因为在jQuery中，有ready()方法，它在页面HTML文档解析完成但图片等媒体文件加载完成之前执行。
使用jQuery插件一般都这么写
$(function(){ //do something alert(‘something finished！‘) });
其实这个就是jQuery ready()的简写，他等价于
$(document).ready(function(){ //do something alert(‘something finished！‘) })
这个jQuery ready()的方法就是DOM Ready ，他的作用就是，在DOM加载完成后，图片等外部文件加载之前，就可以对DOM进行操作。
在不使用jQuery的情况下，可以使用DOMContentLoaded事件可以判断DOM的ready状态。
document.addEventListener(‘DOMContentLoaded‘, function () { //do something alert(‘something finished！‘) });
它表示在document节点上监听DOMContentLoaded事件，一旦document中的DOM完成加载就触发此事件。
IE8不支持DOMContentLoaded事件，因此在较低版本的浏览器中，可以使用 readystatechange事件，效果是一样的。
document.onreadystatechange = function () { if (document.readyState == "interactive") { //do something alert(‘something finished！‘) }}
其中，document.readyState属性返回当前文档的状态，共有三种可能的值。
- loading：加载HTML代码阶段（尚未完成解析）
- interactive：加载外部资源阶段时
- complete：加载完成时
Dom Load
DOM在完全加载完成之后会触发load事件，此时如果想做点事情的话，可以这么写
window.onload=function(){ //do something alert(‘something finished！‘) }
注意，不要写成document.onload，因为在大多数浏览器中，在document上监听load事件是无效的，应当在window上监听。
使用jQuery的写法
$(window).load(function(){ //do something alert(‘something finished！‘) })
这就是Dom Load，他的作用就是，在DOM以及其中的图片等其他外部文件全部加载完毕之后触发。
考虑一下下面的代码在执行时，会先弹出哪个窗口。
<script> window.onload=function(){ alert(‘load finished！‘) } document.addEventListener(‘DOMContentLoaded‘,function(){ alert(‘ready finished！‘) }) </script> <body> <h1>这是一个 javascript 测试程序</h1> </body>
参考：
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
https://www.w3.org/TR/html5/syntax.html#the-end
JavaScript标准参考教程http://javascript.ruanyifeng.com/dom/document.html
以上是关于DOM加载过程中ready和load的区别的主要内容，如果未能解决你的问题，请参考以下文章
javascriptdocument load 和document ready的区别
document load 与document ready的区别