首頁常見問題正文

Web前端培訓(xùn):頁面加載事件怎么寫

更新時(shí)間:2022-11-08 來源:黑馬程序員 瀏覽量:

IT培訓(xùn)班

  在網(wǎng)頁開發(fā)中,當(dāng)通過JavaScript代碼操作DOM時(shí)候,如果JavaScript代碼位于頁面元素的上方,會(huì)因?yàn)轫撁嬖剡€沒有加載而執(zhí)行失敗。為了解決這個(gè)問題,便需要將這些代碼包裹在onload事件的處理函數(shù)中,這樣瀏覽器會(huì)在DOM加載完全后再執(zhí)行JavaScript代碼。

  由于onload事件需要在頁面的所有內(nèi)容(包括DOM元素以及圖片等文件)都加載完后才觸發(fā),為了提高網(wǎng)頁的響應(yīng)速度,jQuery中提供了ready事件作為頁面加載事件,其功能類似于JavaScript的onload事件,區(qū)別在于ready事件只需頁面的DOM元素加載完全后便可觸發(fā)。ready事件的語法如下所示。

// 寫法1
$(document).ready(function() {
    //頁面加載后要執(zhí)行的代碼
});
//寫法2
$(function() {
    //頁面加載后要執(zhí)行的代碼
});

 上述語法中,document參數(shù)可以省略,由于寫法2比較簡潔,所以在實(shí)際開發(fā)中應(yīng)用頻率較高。

  另外,與onload事件相比,ready事件的語法比較靈活。這是由于一個(gè)頁面只能編寫一個(gè)onload事件,并且只能執(zhí)行一次;但是一個(gè)頁面中可以包含多個(gè)ready事件,多個(gè)事件之間按照編寫順序依次執(zhí)行。示例代碼如下。

  (1)一個(gè)頁面編寫多個(gè)onload事件。

window.onload = function() {
    console.log('text');
};
window.onload = function() {
    console.log('text2');
};

  上述代碼無法正確執(zhí)行,執(zhí)行結(jié)果只輸出“text2”。

  (2)一個(gè)頁面編寫多個(gè)ready事件。

window.onload = function() {
    console.log('text');
};
window.onload = function() {
    console.log('text2');
};

  上述代碼可以正確執(zhí)行,在控制臺中依次輸出“text1”和“text2”。

分享到:
在線咨詢 我要報(bào)名
和我們在線交談!