Dom Ready和Dom Load
来源:互联网 发布:spss数据分析教程视频 编辑:程序博客网 时间:2024/05/20 17:10
1、Dom Ready
1
$(
function
(){
2
3
// do something
4
5
});
1
$(document).ready(
function
(){
2
//do something
3
})
4
//或者下面这个方法,jQuer的默认参数是:“document”;
5
$().ready(
function
(){
6
//do something
7
})
2、Dom Load
1
window.onload=
function
(){
2
//do something
3
}
4
//或者经常用到的图片,假设这个
5
document.getElementById(
"imgID"
).onload=
function
(){
6
//do something
7
}
这种就是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/(注意第二次测试的时候要清除缓存)
1
$().ready(
function
() {
2
3
$(
"#big_A"
).width(
"100px"
);
4
5
});
01
new
function
(){
02
03
dom = [];
04
05
dom.isReady =
false
;
06
07
dom.isFunction =
function
(obj){
08
09
return
Object.prototype.toString.call(obj) ===
"[object Function]"
;
10
11
}
12
13
dom.Ready =
function
(fn){
14
15
dom.initReady();
//如果没有建成DOM树,则走第二步,存储起来一起杀
16
17
if
(dom.isFunction(fn)){
18
19
if
(dom.isReady){
20
21
fn();
//如果已经建成DOM,则来一个杀一个
22
23
}
else
{
24
25
dom.push(fn);
//存储加载事件
26
27
}
28
29
}
30
31
}
32
33
dom.fireReady =
function
(){
34
35
if
(dom.isReady)
return
;
36
37
dom.isReady =
true
;
38
39
for
(
var
i=0,n=dom.length;i<n ;i++){
40
41
var
fn = dom[i];
42
43
fn();
44
45
}
46
47
dom.length = 0;
//清空事件
48
49
}
50
51
dom.initReady =
function
(){
52
53
if
(document.addEventListener) {
54
55
document.addEventListener(
"DOMContentLoaded"
,
function
(){
56
57
document.removeEventListener(
"DOMContentLoaded"
, arguments.callee,
false
);
//清除加载函数
58
59
dom.fireReady();
60
61
},
false
);
62
63
}
else
{
64
65
if
(document.getElementById) {
66
67
document.write(
"<script id=\"ie-domReady\" defer='defer'src=\"//:\">< \/script>"
);
68
69
document.getElementById(
"ie-domReady"
).onreadystatechange =
function
() {
70
71
if
(
this
.readyState ===
"complete"
) {
72
73
dom.fireReady();
74
75
this
.onreadystatechange =
null
;
76
77
this
.parentNode.removeChild(
this
)
78
79
}
80
81
};
82
83
}
84
85
}
86
87
}
88
89
}
01
dom.Ready(
function
(){
02
03
alert(
"我的domReady!"
)
04
05
});
06
07
dom.Ready(
function
(){
08
09
alert(
"我的domReady测试多重加载1!"
)
10
11
});
12
13
dom.Ready(
function
(){
14
15
alert(
"我的domReady测试多重加载2!"
)
16
17
});
18
19
dom.Ready(
function
(){
20
21
alert(document.getElementById(
"test"
).innerHTML)
22
23
});
- Dom Ready和Dom Load
- Dom Ready 和 Dom Load 的区别
- Start Render,DOM Ready,Page Load
- DOM Ready之 document.ready和onload的区别
- DOM ready与onload
- prototype dom ready方法
- DOM Ready详解
- js-Dom ready
- DOM Ready探究
- Jquery的ready和Dom的onload的区别
- jquery中DOM加载事件,onload事件和ready事件
- 关于Angularjs1.x dom ready
- jQuery load()和ready()
- DOM中的load方法和loadXML方法的区…
- JavaScript学习总结【9】DOM Ready
- 关于DOM和HTML DOM
- XML DOM和HTML DOM
- 什么是DOM 和 DOM 参考手册
- opnet仿真问题总结
- [Android实例] eoe & 友盟教程大赛【ToggleButton使用教程】
- 正确的使用语句块
- dom4j通过xpath查询xml
- poj3352 - Road Construction
- Dom Ready和Dom Load
- iOS应用程序内存调试的代码
- fcntl即F_SETFL,F_GETFL的使用,设置文件的flags
- objectAtIndex返回的是指针,对其进行修改会影响集合中的元素
- ms sql server sql 查询所有数据库、表名、表字段总结
- android系统横竖屏切换问题
- string 与 char * 转换
- 【Windows8开发】异步编程进阶篇之 对thread说不,用task
- 软件成熟度模型CMM