1、Dom Ready
真不知道这个标题该怎么取,暂时就先凑活着用了。
用jQ的人很多人都是这么开始写脚本的:
[code=”javascript”]
$(function(){
// do something
});
[/code]
其实这个就是jq ready()的简写,他等价于:
[code=”javascript”]
$(document).ready(function(){
//do something
})
//或者下面这个方法,jQuer的默认参数是:“document”;
$().ready(function(){
//do something
})
[/code]
这个就是jq ready()的方法就是Dom Ready,他的作用或者意义就是:在DOM加载完成后就可以可以对DOM进行操作。
一般情况先一个页面响应加载的顺序是,域名解析-加载html-加载js和css-加载图片等其他信息。
那么Dom Ready应该在“加载js和css”和“加载图片等其他信息”之间,就可以操作Dom了。
2、Dom Load
用原生的js的时候我们通常用onload时间来做一些事情,比如:
[code=”javascript”]
window.onload=function(){
//do something
}
//或者经常用到的图片,假设这个
document.getElementById(“imgID”).onload=function(){
//do something
}
[/code]
3.用个最常用的例子说明Dom Ready和Dom Load两者的区别
- Dom Ready是在dom加载完成后就可以直接对dom进行操作,比如一张图片只要<img>标签完成,不用等这个图片加载完成,就可以设置图片的宽高的属性或样式等;
- Dom Load是在整个document文档(包括了加载图片等其他信息)加载完成后就可以直接对dom进行操作,比如一张图片要等这个图标加载完成之后才能设置图片的宽高的属性或样式等;
Dom Ready在jQ中的基本的写法:
[code=”javascript”]
$().ready(function() {
$(“#big_A”).width(“100px”);
});
[/code]
在原生的js中没有Dom Ready的直接方法,只有Dom Load的方法就是load事件。
有牛人封装了很多方法,jq,YUI等js库也是封装出来的,呵呵。
以下是来自http://www.cnblogs.com/rubylouvre/archive/2009/12/30/1635645.html的一个Dom Ready的方法:
[code=”javascript”]
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
document.getElementById(“ie-domReady”).onreadystatechange = function() {
if (this.readyState === “complete”) {
dom.fireReady();
this.onreadystatechange = null;
this.parentNode.removeChild(this)
}
};
}
}
}
}
[/code]
使用方法:
[code=”javascript”]
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)
});
[/code]
点击查看demo:https://www.html.cn/demo/domready/(注意第二次测试的时候要清除缓存)
欢迎留言斧正拍砖!
细节,很好的文章,还是用户体验。
世界在变,好快。
总觉得司徒很厉害