document.ready和onload的区别

转载 2012年03月28日 21:31:03
页面加载完成有两种事件,一是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时间来做一些事情,比如:
 
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,通常是先把页面撑开,加载完成后再把图片重设宽高,图片加载多少时间,这个页面就会撑开多久,用户会非常难受!!
这点可以看我做的一个的一个小demo:http://www.css88.com/demo/domready/(注意第二次测试的时候要清除缓存)
Dom Ready在jQ中的基本的写法:
 
$().ready(function() {
 
$("#big_A").width("100px");
 
});
在原生的js中没有Dom Ready的直接方法,只有Dom Load的方法就是load事件。
有牛人封装了很多方法,jq,YUI等js库也是封装出来的,呵呵。
以下是来自http://www.cnblogs.com/rubylouvre/archive/2009/12/30/1635645.html的一个Dom Ready的方法:
 
new function(){
 
dom = [];
 
dom.isReady = false;
 
dom.isFunction = function(obj){
 
return Object.prototype.toString.call(obj) === "[object Function]";
 
}
 
dom.Ready = function(fn){
 
dom.initReady();//如果没有建成DOM树,则走第二步,存储起来一起杀
 
if(dom.isFunction(fn)){
 
if(dom.isReady){
 
fn();//如果已经建成DOM,则来一个杀一个
 
}else{
 
dom.push(fn);//存储加载事件
 
}
 
}
 
}
 
dom.fireReady =function(){
 
if (dom.isReady)  return;
 
dom.isReady = true;
 
for(var i=0,n=dom.length;i<n ;i++){
 
var fn = dom[i];
 
fn();
 
}
 
dom.length = 0;//清空事件
 
}
 
dom.initReady = function(){
 
if (document.addEventListener) {
 
document.addEventListener( "DOMContentLoaded", function(){
 
document.removeEventListener( "DOMContentLoaded", arguments.callee, false );//清除加载函数
 
dom.fireReady();
 
}, false );
 
}else{
 
if (document.getElementById) {
 
document.write("<script id=\"ie-domReady\" defer='defer'src=\"//:\">< \/script>");
 
document.getElementById("ie-domReady").onreadystatechange = function() {
 
if (this.readyState === "complete") {
 
dom.fireReady();
 
this.onreadystatechange = null;
 
this.parentNode.removeChild(this)
 
}
 
};
 
}
 
}
 
}
 
}
使用方法:
 
dom.Ready(function(){
 
alert("我的domReady!")
 
});
 
dom.Ready(function(){
 
alert("我的domReady测试多重加载1!")
 
});
 
dom.Ready(function(){
 
alert("我的domReady测试多重加载2!")
 
});
 
dom.Ready(function(){
 
alert(document.getElementById("test").innerHTML)
 
});

document.ready和onload的区别——JavaScript文档加载完成事件

页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页 面包含图片等文件在内的所有元素都加载完成。(可以说:ready 在onloa...
  • kk5595
  • kk5595
  • 2010年07月05日 11:42
  • 52762

document.ready和onload的区别----JavaScript文档加载完成事件(二)

页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页 面包含图片等文件在内的所有元素都加载完成。(可以说:ready 在onload...
  • piaoxuan1987
  • piaoxuan1987
  • 2016年04月11日 22:23
  • 531

脱离document.onload和window.onload的onload事件

  • 2015年04月29日 17:12
  • 2KB
  • 下载

js页面加载触发的事件 document.write 和document.onload的区别

document.ready和onload的区别——JavaScript文档加载完成事件 页面加载完成有两种事件: 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件); 二是...
  • yyjourney
  • yyjourney
  • 2017年06月05日 10:40
  • 416

document.ready和onload的区别——JavaScript文档加载完成的那点事儿

页面加载完成有两种事件: $(document).ready(function(){}) : 表示文档结构已经加载完成(不包含图片等非文字媒体文件) $(document).read...
  • yc1022
  • yc1022
  • 2016年04月07日 01:04
  • 1146

jquery Onload()和 ready()的区别

onload需要页面上所有的资源都加载上之后执行,而ready则是DOM文档树已经解析完成时,说ready比onload快最显著的是比如一个页面上有一个很大的图片,加载要好久,onload只有在图片加...
  • QQQQQQ654
  • QQQQQQ654
  • 2017年01月04日 02:47
  • 482

JS中页面加载事件window.onload、onload()、document.onclick

当我们刷新页面的时候,有时需要页面自动加载一些事件来达到预期效果,现介绍下面三种方法Onload()、addLoadEvent()、document.onclick。 onload() 事件会在页面...
  • xiaokangmiclong
  • xiaokangmiclong
  • 2015年11月20日 10:58
  • 2708

文档就绪事件--document.ready和onload的区别

文档就绪事件–document.ready和onload的区别页面加载完成有两种事件: ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件); onload,指示页面包含图片等文件在内的...
  • gmd_web
  • gmd_web
  • 2017年02月16日 12:02
  • 966

onload与ready方法的区别

Jquery中$(document).ready()和window.onload的区别 $(document).ready()和window.onload在表单上看都是页面加载时我们...
  • NARUTO_LUOLUO
  • NARUTO_LUOLUO
  • 2016年04月29日 16:36
  • 819

JS中的onload与jQuery中的ready区别

JS中的onload与jQuery中的ready区别介绍
  • huangyibin628
  • huangyibin628
  • 2014年05月09日 11:23
  • 1862
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:document.ready和onload的区别
举报原因:
原因补充:

(最多只允许输入30个字)