JS页面加载,document.ready和onload的区别

本文介绍了Dom Ready和Dom Load的概念及区别。Dom Ready是在DOM加载完成后即可操作DOM,处于加载js和css与加载图片等信息之间;Dom Load是在document文档(含图片等)加载完成后操作DOM,在加载图片等信息之后。还通过图片设置宽高举例说明两者区别。

1、Dom Ready

用jQ的人很多人都是这么开始写脚本的: 

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

其实这个就是jq ready()的简写,他等价于: 

window.onload=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
}

用jq 写,等价于

$(window).load(function(){})

这种就是Dom Load,他的作用或者意义就是:在document文档加载完成后就可以可以对DOM进行操作,document文档包括了加载图片等其他信息。
那么Dom Load就是在页面响应加载的顺序中的“加载图片等其他信息”之后,就可以操作Dom了。

3.用个最常用的例子说明Dom Ready和Dom Load两者的区别
Dom Ready是在dom加载完成后就可以直接对dom进行操作,比如一张图片只要<img>标签完成,不用等这个图片加载完成,就可以设置图片的宽高的属性或样式等;
Dom Load是在整个document文档(包括了加载图片等其他信息)加载完成后就可以直接对dom进行操作,比如一张图片要等这个图标加载完成之后才能设置图片的宽高的属性或样式等

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值