JS - DOM_Ready、DOM_Load 区别

页面加载事件详解

最新推荐文章于 2022-07-18 17:22:02 发布

原创最新推荐文章于 2022-07-18 17:22:02 发布 · 769 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JS #前端 #DOM #Load #Ready

HTML/CSS/JS 专栏收录该内容

93 篇文章

订阅专栏

本文详细介绍了页面加载过程中两种重要的事件：DomReady 和 DomLoad。DomReady 指文档结构加载完成即可对 DOM 进行操作；DomLoad 则指整个页面包括图片等资源完全加载后才能操作 DOM。文章还提供了 jQuery 和纯 JavaScript 实现这两种事件的方法。

页面加载完成有两种事件：

一、ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件）。
二、onload，指示页面包含图片等文件在内的所有元素都加载完成。

1、Dom Ready

/* 使用jq时一般都是这么开始写脚本的 */
$(function(){ 
      // do something 
});

/* jq ready()的简写，它等价于 */
$(document).ready(function(){
     //do something
})

/* 或者下面这个方法，jq的默认参数是："document" */
$().ready(function(){
    //do something
})

/* JS ready 实现方式 */
document.ready=function(){...} // 1：无参函数
document.ready() // 执行1

document.ready = function(callback) { // 2：自定义函数
	//兼容FF,Google
	if(document.addEventListener) {
		document.addEventListener('DOMContentLoaded', function() {
			document.removeEventListener('DOMContentLoaded', arguments.callee, false);
			callback();
		}, false)
	}
	//兼容IE
	else if(document.attachEvent) {
		document.attachEvent('onreadystatechange', function() {
			if(document.readyState == "complete") {
				document.detachEvent("onreadystatechange", arguments.callee);
				callback();
			}
		})
	} else if(document.lastChild == document.body) {
		callback();
	}
}
document.ready(function(){ // 执行2
   alert('Document is ready!')
})

Ps：这个就是jq ready()的方法就是Dom Ready，它的作用或者意义就是:在DOM加载完成后就可以可以对DOM进行操作。
一般情况一个页面响应加载的顺序：域名解析--加载html--加载js和css--加载图片等其他信息。
那么Dom Ready应该在“加载js和css”和“加载图片等其他信息”之间，就可以操作Dom了。

1. window.onload = function(){...}
2. document.ready = function(){...}

Ps1：2本身不会自启动,但是1可以自启动，所以2需要document.ready()来启动。
Ps2：如果1和2同时存在，无论顺序如何，都先执行2，再执行1。

2、Dom Load

window.onload=function(){
      //do something
}

/* 或者经常用到的图片 */
document.getElementById("imgID").onload=function(){
     //do something
}

Ps：那么Dom Load就是在页面响应加载的顺序中的“加载图片等其他信息”之后，就可以操作Dom了。

3、附加

/* 在所有DOM元素加载之前执行的jQuery代码 */
<script type="text/javascript">
(function() {
            alert("DOM还没加载哦!");
        })(jQuery)
</script>