js页面加载的几个状态

㈠ js怎样页面加载之前执行

提醒：浏览器对html页面内容的加载是顺序加载，也就是在html页面中前面先加载，因此当加载到版JS脚本时权，JS是一种解释性的脚本，也是从上而下顺序执行

1、ready，表示 文档结构已经加载完成（不包含图片等非文字媒体文件）；（几种写法）

$(function(){//dosomething});

$(function(){
$("a").click(function(){
alert("Helloworld!");
});
})

$(document).ready(function(){//dosomething})

$().ready(function(){//dosomething})

2、onload，表示 页面包含图片等文件在内的所有元素都加载完成。

window.onload=function(){//dosomething}

document.getElementById("imgID").onload=function(){//dosomething}

㈡ JS 页面加载触发事件 document.ready和onload的区别

一、意思不同

ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件）。

onload，指示页面包含图片等文件在内的所有元素都加载完成。

二、作用不同

Dom Ready是在dom加载完成后就可以直接对dom进行操作，比如一张图片只要<img>标签完成，不用等这个图片加载完成，就可以设置图片的宽高的属性或样式等。

Dom Load是在整个document文档（包括了加载图片等其他信息）加载完成后就可以直接对dom进行操作，比如一张图片要等这个图标加载完成之后才能设置图片的宽高的属性或样式等。

三、用法不同

用原生的js的时候我们通常用onload时间来做一些事情，比如：

window.οnlοad=function(){

//do something

}

或者经常用到的图片，假设这个

document.getElementById("imgID").οnlοad=function(){

//do something

}

这种就是Dom Load，他的作用或者意义就是:在document文档加载完成后就可以可以对DOM进行操作，document文档包括了加载图片等其他信息。

那么Dom Load就是在页面响应加载的顺序中的“加载图片等其他信息”之后，就可以操作Dom了。

㈢ JS 页面加载触发事件 document.ready和onload的区别

1. document.ready是jquery提供复的，正确的写法如下制：

$(document).ready(function(){
//......
});

因为这么些比较麻烦，所以一般使用简写的方式，如下：

$(function(){
//....
});

2. 关于document.ready与onload的相同点：都是在页面加载完成后执行方法体中的代码；不同点：document.ready可以绑定多个函数，js根据定义的顺序，依次执行各个方法体，onload不能定义多个，后面定义的会覆盖前面定义的，所以只会执行最后定义的方法。

$(function(){
//方法体1，页面加在后执行
});
$(function(){
//方法体2，方法体1执行后执行
});

window.onload=function(){
//onload方法1
};
window.onload=function(){
//onload方法2，页面加载完成后执行，不会执行onload方法1

}

㈣ 动态加载javascript文件的问题！

我测试了一下你的代码,onload事件好像对<script>标签并不起什麼作用,这个是怎麼回事我也不清楚.
js.onreadystatechange , 这个属性代表的是赋予script标签src属性之后之后,js文件的加载状态. 测试了一下,这个属性好像就只有"complete"一个值.
需要注意的是, 在onreadystatechange没有"complete"前,你的js文件并未加载完成,这个时候你如果进行其他操作,用到了正在加载的这个js裏面的方法,就会报错,提示你方法未定义.这个加载过程,是通过异步方式来完成的(你的错误可能就是因为对这个不了解),所以,你如果想在加载完这个js后再去加载其他js或者做其他的关联动作,你应该把对应的代码放到:
js.onreadystatechange = function () {
if (js.readyState == 'complete') {
//关联动作的代码都应该放到这个位置
}
}
你原来代码出错的原因大概就是在这裏吧!
不过这样如果要顺次加载多个js的话,需要一层一层去嵌套,感觉相当麻烦.建议你用XMLHTTP的方式来处理.提供给你一个方法,是兼容IE/firefox的,已经测试过了,不过代码不够简化,你自己适当的处理一下吧 ..

functionIncludeJS(sId,url){
//判断该ID对应的控件是否已经存在，如果已经存在则返回
varLOBJ_Script=document.getElementById(sId);
if(LOBJ_Script){
if(LOBJ_Script.text!=""||LOBJ_Script.src!=""){
returnfalse;
}
}
//创建XmlHTTP对象
varLOBJ_XmlHttp={};
if(window.ActiveXObject){//IE
LOBJ_XmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}elseif(window.XMLHttpRequest){//Gecko
LOBJ_XmlHttp=newXMLHttpRequest();
}
//定义XmlHTTP对象readyState属性改变时的事件处理函数
LOBJ_XmlHttp.OnReadyStateChange=function(){
if(LOBJ_XmlHttp.readyState==4){
varLSTR_Source=LOBJ_XmlHttp.responseText;
if((LSTR_Source!=null)){
varLOBJ_Script=document.getElementById(sId);
if(!LOBJ_Script){
LOBJ_Script=document.createElement("script");
}
LOBJ_Script.language="javascript";
LOBJ_Script.type="text/javascript";
LOBJ_Script.id=sId;
LOBJ_Script.defer=true;
LOBJ_Script.text=LSTR_Source;
//将Script控件添加到画面中
if(!document.getElementById(sId)){
varLOBJ_Head=document.getElementsByTagName('HEAD').item(0);
LOBJ_Head.appendChild(LOBJ_Script);
}
}
}
};
LOBJ_XmlHttp.open('GET',url,false);
LOBJ_XmlHttp.send(null);
if(window.XMLHttpRequest){
if(LOBJ_XmlHttp.readyState==4){
if(LOBJ_XmlHttp.status==200){
varLSTR_Source=LOBJ_XmlHttp.responseText;
if((LSTR_Source!=null)){
varLOBJ_Script=document.getElementById(sId);
if(!LOBJ_Script){
LOBJ_Script=document.createElement("script");
}
LOBJ_Script.language="javascript";
LOBJ_Script.type="text/javascript";
LOBJ_Script.id=sId;
LOBJ_Script.defer=true;
LOBJ_Script.text=LSTR_Source;
//将Script控件添加到画面中
if(!document.getElementById(sId)){
varLOBJ_Head=document.getElementsByTagName('HEAD').item(0);
LOBJ_Head.appendChild(LOBJ_Script);
}
}
}
}
}
}