document.ready事件和document.load事件的区别
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了document.ready事件和document.load事件的区别相关的知识，希望对你有一定的参考价值。
1、概念
document.ready：
是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件）；
document.load：
是onload，指示页面包含图片等文件在内的所有元素都加载完成。
2、作用
document.ready：
在DOM加载完成后就可以可以对DOM进行操作。
一般情况一个页面响应加载的顺序是，域名解析-加载html-加载js和css-加载图片等其他信息。
那么Dom Ready应该在“加载js和css”和“加载图片等其他信息”之间，就可以操作Dom了。
document.load：
在document文档加载完成后就可以可以对DOM进行操作，document文档包括了加载图片等其他信息。
那么Dom Load就是在页面响应加载的顺序中的“加载图片等其他信息”之后，就可以操作Dom了。
3、加载顺序
document.ready：
文档加载的顺序：域名解析-->加载HTML-->加载javascript和CSS-->加载图片等非文字媒体文件。
只要<img>标签加载完成，不用等该图片加载完成，就可以设置图片的属性或样式等。
在原生JavaScript中没有Dom ready的直接方法。
document.load：
文档加载的顺序：域名解析-->加载HTML-->加载JavaScript和CSS-->加载图片等非文字媒体文件。
DOM load在加载图片等非文字媒体文件之后，表示在document文档加载完成后才可以对DOM进行操作，document文档包括了加载图片等非文字媒体文件。
例如，需要等该图片加载完成，才可以设置图片的属性或样式等。
在原生JavaScript中使用onload事件。
扩展资料
$(document).ready()和传统的方法<body onload=”load()”> 相似，不同的是onload()的方法是在页面加载完成后才发生，这包括DOM元素和其他页面元素（例如图片）的加载。
而$(document).ready()所要执行的代码是在DOM元素被加载完成的情况下执行，所以，使用document.ready()方法的执行速度比onload()的方法要快。
Javascript 只有在DOM元素已经定义以后才可以对其执行某种操作，jQuery使用document.ready来保证所要执行的代码是在DOM元素被加载完成的情况下执行。
页面加载完成有两种事件，一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件），二是onload，指示页面包含图片等文件在内的所有元素都加载完成。
真不知道这个标题该怎么取，暂时就先凑活着用了。
用jQ的人很多人都是这么开始写脚本的：
$(function()
// do something
);
其实这个就是jq ready()的简写，他等价于：
$(document).ready(function()
//do something
)
//或者下面这个方法，jQuer的默认参数是：“document”；
$().ready(function()
//do something
)
这个就是jq ready()的方法就是Dom Ready，他的作用或者意义就是:在DOM加载完成后就可以可以对DOM进行操作。
一般情况先一个页面响应加载的顺序是，域名解析-加载html-加载js和css-加载图片等其他信息。
那么Dom Ready应该在“加载js和css”和“加载图片等其他信息”之间，就可以操作Dom了。
2、Dom Load
用原生的js的时候我们通常用onload时间来做一些事情，比如：
这个网址：http://wenku.baidu.com/link?url=Tpqh30OAqO4FoV1ecDUjDigbQJFgfzkjSHDe7oJ72pjxBT1qzAfnFKF01js3o7XOb7T40rX-3UEMqOjvmwnnrlUdgc0SpCiu05EJSdMPtZm本回答被提问者和网友采纳
JS 页面加载触发事件 document.ready和onload的区别
JS 页面加载触发事件 document.ready和onload的区别
document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件：
一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件）；
二是onload，指示页面包含图片等文件在内的所有元素都加载完成。
1、Dom Ready
用jQ的人很多人都是这么开始写脚本的：
$(function(){
// do something
});
例如：
$(function() {
$("a").click(function() {
alert("Hello world!");
});
})
这个例子就是给所有的a标签 绑定了一个click事件。即当所有链接被鼠标单击的时候，都执行 alert("Hello World!");
(自己的理解)也就是说页面加载时绑定，真正该触发时触发。
其实这个就是jq ready()的简写，他等价于：
$(document).ready(function(){
//do something
})
或者下面这个方法，jQuer的默认参数是：“document”；
$().ready(function(){
//do something
})
这个就是jq ready()的方法就是Dom Ready，他的作用或者意义就是:在DOM加载完成后就可以可以对DOM进行操作。
一般情况一个页面响应加载的顺序是，域名解析-加载html-加载js和css-加载图片等其他信息。
那么Dom Ready应该在“加载js和css”和“加载图片等其他信息”之间，就可以操作Dom了。
2、Dom Load
用原生的js的时候我们通常用onload时间来做一些事情，比如：
window.onload=function(){
//do something
}
或者经常用到的图片，假设这个
document.getElementById("imgID").onload=function(){
//do something
}
这种就是Dom Load，他的作用或者意义就是:在document文档加载完成后就可以可以对DOM进行操作，document文档包括了加载图片等其他信息。
那么Dom Load就是在页面响应加载的顺序中的“加载图片等其他信息”之后，就可以操作Dom了。
3.用个最常用的例子说明Dom Ready和Dom Load两者的区别
Dom Ready是在dom加载完成后就可以直接对dom进行操作，比如一张图片只要<img>标签完成，不用等这个图片加载完成，就可以设置图片的宽高的属性或样式等；
Dom Load是在整个document文档（包括了加载图片等其他信息）加载完成后就可以直接对dom进行操作，比如一张图片要等这个图标加载完成之后才能设置图片的宽高的属性或样式等；
比
如一个图片浏览的效果，通常如果图片尺寸很大的情况下，为了防止图片把页面撑开通常会限定图片的宽度或高度，如果是单张图片或者是多张规格比例统一的图片
下我们可以直接在<img>上加个宽度或者高度的属性<img src=“img.jpg” alt=”码头的大照片”
width=“100”
height=“90”>，或者可以在css样式中加宽度或者高度的属性（推荐）。但是如果这些张规格比例不统一的图片要浏览呢？那就有问题，你设
置宽高很可能造成图片严重失真。在ie6之后ie7，ie8还有其他主流浏览器支持css2.1中min-width，max-width，min-
height，max-width，这样我们就可以用min-width，max-width，min-height，max-width解决这些问题，
但是ie6除非是抛弃性能问题用css表达式（当然old9(http://old9.blogsome.com/2008/10/26/css-expression-reloaded/)和怿飞(http://www.planabc.net/2009/09/21/optimization_of_css_eexpression/)
有关于css表达式性能问题的解决方案,大家可以看一下）。这个时候ie的最好解决方案就是用Dom Ready而不是Dom
Load，因为通常大图片加载的时候会一点一点的加载，这个在尺寸大，字节多，网速慢的时候表现的非常明显，用Dom
Load，通常是先把页面撑开，加载完成后再把图片重设宽高，图片加载多少时间，这个页面就会撑开多久，用户会非常难受！！
以上是关于document.ready事件和document.load事件的区别的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript：DOM 加载事件、执行顺序和 $(document).ready()
JavaScript：DOM 加载事件、执行顺序和 $(document).ready()
JS 页面加载触发事件 document.ready和onload的区别
$(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法