如何在DOM元素加載完畢后執(zhí)行js代碼以及DOM加載過程

最近在寫一個動態(tài)菜單驻谆。即票罐,根據用戶角色權限生成菜單選項。動態(tài)菜單采用js進行html代碼拼接暮胧,再append到相應的節(jié)點锐借。但是存在一個問題,就是菜單功能的js代碼會在DOM元素加載完成之前執(zhí)行往衷,也就是菜單生成之前執(zhí)行钞翔,所以所有綁定的菜單點擊事件都不能執(zhí)行。

認識DOM和DOM加載過程以及如何讓DOM加載完成后再執(zhí)行js腳本文件

<b>DOM加載過程:</b>
網頁文檔加載都是按順序執(zhí)行的席舍。一般瀏覽器渲染操作順序大致是一下幾個步驟:
1.解析HTML結構
2.加載外部腳本和樣式表文件
3.解析并執(zhí)行腳本代碼
4.構造HTML DOM模型
5.加載圖片等外部文件
6.頁面加載完畢

從以上順序可以看出布轿,js等腳本會在DOM文檔構造之前執(zhí)行,這樣js就無法訪問DOM文檔對象模型俺亮。所以一般把可執(zhí)行腳本放在頁面初始化事件處理函數(shù)中驮捍,這樣能確保文檔加載完畢后再執(zhí)行腳本。所以我們一般這樣寫:
window.onload = function(){//執(zhí)行腳本}
window.onload表示頁面加載完了后(包括dom和js)

window.onload = function(){//執(zhí)行腳本}

這樣的話脚曾,這段js代碼將會在DOM元素加載完畢之后進行菜單點擊事件的綁定东且。

這個問題調試了很久很久,最后一行代碼就解決了本讥。233...
代碼真是需要多寫珊泳,多累積經驗。感觸太深了拷沸。QAQ

window.onload大法好吧椤!

6-1

談談document.ready和window.onload的區(qū)別

在Jquery里面撞芍,我們可以看到兩種寫法:$(function(){}) 和$(document).ready(function(){})

這兩個方法的效果都是一樣的秧了,都是在dom文檔樹加載完之后執(zhí)行一個函數(shù)(注意,這里面的文檔樹加載完不代表全部文件加載完)序无。

而window.onload是在dom文檔樹加載完和所有文件加載完之后執(zhí)行一個函數(shù)验毡。也就是說$(document).ready要比window.onload先執(zhí)行。

原文地址:談談document.ready和window.onload的區(qū)別

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末帝嗡,一起剝皮案震驚了整個濱河市晶通,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌哟玷,老刑警劉巖狮辽,帶你破解...
    沈念sama閱讀 206,968評論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡喉脖,警方通過查閱死者的電腦和手機椰苟,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,601評論 2 382
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來动看,“玉大人尊剔,你說我怎么就攤上這事×饨裕” “怎么了?”我有些...
    開封第一講書人閱讀 153,220評論 0 344
  • 文/不壞的土叔 我叫張陵挨稿,是天一觀的道長仇轻。 經常有香客問我,道長奶甘,這世上最難降的妖魔是什么篷店? 我笑而不...
    開封第一講書人閱讀 55,416評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮臭家,結果婚禮上疲陕,老公的妹妹穿的比我還像新娘。我一直安慰自己钉赁,他們只是感情好蹄殃,可當我...
    茶點故事閱讀 64,425評論 5 374
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著你踩,像睡著了一般诅岩。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上带膜,一...
    開封第一講書人閱讀 49,144評論 1 285
  • 那天吩谦,我揣著相機與錄音,去河邊找鬼膝藕。 笑死式廷,一個胖子當著我的面吹牛,可吹牛的內容都是我干的芭挽。 我是一名探鬼主播滑废,決...
    沈念sama閱讀 38,432評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼览绿!你這毒婦竟也來了策严?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,088評論 0 261
  • 序言:老撾萬榮一對情侶失蹤饿敲,失蹤者是張志新(化名)和其女友劉穎妻导,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 43,586評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡倔韭,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,028評論 2 325
  • 正文 我和宋清朗相戀三年术浪,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片寿酌。...
    茶點故事閱讀 38,137評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡胰苏,死狀恐怖,靈堂內的尸體忽然破棺而出醇疼,到底是詐尸還是另有隱情硕并,我是刑警寧澤,帶...
    沈念sama閱讀 33,783評論 4 324
  • 正文 年R本政府宣布秧荆,位于F島的核電站倔毙,受9級特大地震影響,放射性物質發(fā)生泄漏乙濒。R本人自食惡果不足惜陕赃,卻給世界環(huán)境...
    茶點故事閱讀 39,343評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望颁股。 院中可真熱鬧么库,春花似錦、人聲如沸甘有。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,333評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽梧疲。三九已至允睹,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間幌氮,已是汗流浹背缭受。 一陣腳步聲響...
    開封第一講書人閱讀 31,559評論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留该互,地道東北人米者。 一個月前我還...
    沈念sama閱讀 45,595評論 2 355
  • 正文 我出身青樓,卻偏偏與公主長得像宇智,于是被迫代替她去往敵國和親蔓搞。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 42,901評論 2 345

推薦閱讀更多精彩內容

  • 1.幾種基本數(shù)據類型?復雜數(shù)據類型?值類型和引用數(shù)據類型?堆棧數(shù)據結構? 基本數(shù)據類型:Undefined随橘、Nul...
    極樂君閱讀 5,498評論 0 106
  • 之前通過深入學習DOM的相關知識喂分,看了慕課網DOM探索之基礎詳解篇這個視頻(在最近看第三遍的時候,準備記錄一點東西...
    微醺歲月閱讀 4,452評論 2 62
  • 十月的匆匆一瞥机蔗, 便知你已從秋葉的金黃中走過蒲祈。 那田間地頭的翠綠秧苗甘萧, 棵棵都洋溢著你那甜美的微笑。 沒有了霓裳羽...
    碧波飛龍閱讀 276評論 0 1
  • 愛上全民K歌的我是在2014年
    小灰灰_a5fa閱讀 336評論 0 0
  • 嘲諷 朱迅雷 從不曾真正瘋狂 你的嘲諷便有局限 你何嘗不在自筑的城堡酣睡梆掸? 有什么理由可以證明你最深沉扬卷? 做自己想...
    橘子sandglass閱讀 153評論 0 0