1. 程式人生 > >有關js頁面載入的一些解析,load和ready

有關js頁面載入的一些解析,load和ready

用jQuery的大多數開始都是這麼寫指令碼的

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

比如:

$(function(){
        $("#btn1").click({
                $("div").fadeIn(3000);
        });

});

上面這個程式碼就是在給id為btn1的按鈕綁定了一個事件,這個事件就是在頁面載入時完成繫結,然後等待事件的觸發。

上面的就是下面的簡寫,等於:

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

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

這個方法就是DOM Ready,意思就是在DOM載入完成後就可以對DOM進行操作。

一般頁面載入的順序是:

域名解析–>載入HTML–>載入js和css–>載入圖片等資訊

所以這個方法一般是在載入[js和css]和[載入圖片等資訊]之間就可以操作DOM。

當我們用原生的js的時候一般用onload來做一些事情,比如:

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

或者用一個圖片,比如:

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

這就是DOM load(不是jQuery的load()方法),它的作用就是在document文件載入完成後就可對DOM進行操作,比如一個網頁整個載入完成就可以對這個網頁進行操作。

上面ready和load說明就是:

ready是在DOM載入完成後就可以對DOM 進行操作,而不用等待整個頁面載入完成。

load是在整個文件載入完成後才可以對頁面進行操作,比如一張圖片你要等待這個圖片載入完成才可以對這個圖片進行操作。

上面提了下jQuery的load方法,感覺這需要記錄下:

jQuery load()方式是一個簡單強大的ajax方法。

load()從伺服器獲取資料,並把返回的資料放入被選元素中。

語法:

$(selected).load(URL,data,callback);

其中:

  • URL是必須有的,剩下連個是可選的,callback引數是load()方法執行完後要他去執行的函式。
    比如:
//這個就是將txt檔案中的test文字讀取的內容載入到id為div1的DIV中
$("#div1").load("txt/test.txt");

帶回調函式的:

$("#btn").click(function(){
    $("#div1").load("txt/text.txt",function(responseTxt,statusTxt,xhr){
        if(statusTxt=="success"){
            alert("載入成功");
            alert(responseTxt);
        }
        if(statusTxt=="error"){
            alert("error:"+xhr.status+":"+xhr.statusTxt);
        }
    });
});

上面程式碼中:
- responseTxt:包含呼叫成功時的結果內容
- statusTxt:包含呼叫狀態
- xhr:包含XMLHttpRequest物件。