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);
}
}
}
}
}
}