js頁(yè)面加載后執(zhí)行的幾種方式分別是什么-創(chuàng)新互聯(lián)
js頁(yè)面加載后執(zhí)行的幾種方式分別是什么，針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。
在實(shí)際應(yīng)用中往往需要在頁(yè)面加載完畢之后再去執(zhí)行相關(guān)的js代碼，之所以這么操作是有道理的，如果是操作dom元素，如果相關(guān)元素沒(méi)有加載完成，而去執(zhí)行js代碼，可能會(huì)導(dǎo)致錯(cuò)誤，下面就介紹一下如何實(shí)現(xiàn)頁(yè)面加載完成再去執(zhí)行代碼，這是最為基礎(chǔ)的知識(shí)了，可能初學(xué)者還不太了解，寄希望能夠給需要的朋友帶來(lái)一定幫助。
一.window.onload事件:
代碼如下:
原生js
window.onload=function(){ //code}
jquery
$(window).load(function(){//code});
當(dāng)頁(yè)面完全加載完畢之后再去執(zhí)行code代碼。說(shuō)明頁(yè)面需要dom操作，必須到最后才可以執(zhí)行。
二.使用jQuery的ready事件:
$(document).ready(function() { //code});
一般
(function () {//code}})();
當(dāng)穩(wěn)當(dāng)結(jié)構(gòu)加載完畢再去執(zhí)行code代碼。
通用的頁(yè)面加載后再運(yùn)行JS有兩種方式：1、在DOM加載完畢后，頁(yè)面全部?jī)?nèi)容（如圖片等）完全加載完畢前運(yùn)行JS。 2、在頁(yè)面全部?jī)?nèi)容加載完成（包括引用文件，圖片等）之后再加載JS
1、在DOM加載后，全部?jī)?nèi)容加載前運(yùn)行這種方式在同一文件中可以運(yùn)行多個(gè)且不會(huì)覆蓋。
由于在$(document).ready()方法只要DOM就緒就會(huì)被執(zhí)行，因此可能此時(shí)元素的關(guān)聯(lián)文件未下載完。例如與圖片有關(guān)的HTML下載完畢，并且已經(jīng)解析為DOM樹(shù)了，但很有可能圖片還未加載完畢，所以例如圖片的高度和寬度這樣的屬性此時(shí)不一定有效。要解決這個(gè)問(wèn)題，可以使用Jquery中 load（）方法在需要的文件加載完畢后對(duì)其進(jìn)行操作。
$(document).ready(function(){});$().ready(function(){}) //簡(jiǎn)寫(xiě) 當(dāng)$()不帶參數(shù)時(shí)默認(rèn)就是document$(function(){}); //簡(jiǎn)寫(xiě)
2、在全部?jī)?nèi)容加載后運(yùn)行這種方式中只能執(zhí)行一個(gè) onload代碼，當(dāng)文件由多個(gè)onload或者load，只加載最后一個(gè)，前面的將會(huì)被覆蓋且前面的onload里面的代碼不會(huì)執(zhí)行。
window.onload = function(){}; // —-js $(window).load(function(){}); //---jquery
3、DOM文檔加載步驟
1.解析HTML結(jié)構(gòu)2.加載外部的腳本和樣式文件3.解析并執(zhí)行腳本代碼4.執(zhí)行$(function(){})內(nèi)對(duì)應(yīng)代碼5.加載圖片等二進(jìn)制資源6.頁(yè)面加載完畢，執(zhí)行window.onload
補(bǔ)充：
1：$(function){};
2：$(document).ready(function(){});
3：$(window).load(function(){});
4：window.onload = function(){};
5：在標(biāo)簽上靜態(tài)綁定onload事件，<body onload="aaa()">等待body加載完成，就會(huì)執(zhí)行aaa()方法。
注：第1種是第2種的簡(jiǎn)寫(xiě)方式。兩個(gè)是document加載完成后就執(zhí)行方法。第3種和第4種都是等到整個(gè)window加載完成執(zhí)行方法體。兩者也沒(méi)有區(qū)別，只是一個(gè)使用dom對(duì)象，一個(gè)使用jQuery對(duì)象。
執(zhí)行順序：1和2無(wú)論放在哪里都是最先執(zhí)行，3和4在其之后執(zhí)行，5最后執(zhí)行
關(guān)于js頁(yè)面加載后執(zhí)行的幾種方式分別是什么問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。
網(wǎng)站題目：js頁(yè)面加載后執(zhí)行的幾種方式分別是什么-創(chuàng)新互聯(lián)
轉(zhuǎn)載來(lái)源：http://www.rwnh.cn/article32/doeopc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、企業(yè)網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)公司、域名注冊(cè)、軟件開(kāi)發(fā)、虛擬主機(jī)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- 怎么在php中將Unix時(shí)間戳轉(zhuǎn)換為函數(shù)-創(chuàng)新互聯(lián)
- java安全性如何-創(chuàng)新互聯(lián)
- 掌握系列之并發(fā)編程-9.線程池-創(chuàng)新互聯(lián)
- Cisco之中小型企業(yè)網(wǎng)絡(luò)-創(chuàng)新互聯(lián)
- 教你如何用AST語(yǔ)法樹(shù)對(duì)代碼“動(dòng)手腳”-創(chuàng)新互聯(lián)
- Wex5開(kāi)發(fā)基礎(chǔ)之微信支付-創(chuàng)新互聯(lián)
- Git的安裝和使用教程-創(chuàng)新互聯(lián)
- 深圳外貿(mào)網(wǎng)站建設(shè)，有哪些因素影響外貿(mào)B2C商城網(wǎng)站建設(shè)的價(jià)格？ 2021-10-13
- 外貿(mào)網(wǎng)站建設(shè)開(kāi)發(fā)不容忽視的因素與注意事項(xiàng) 2022-05-02
- 外貿(mào)網(wǎng)站建設(shè)為什么推薦使用美國(guó)主機(jī) 2016-04-30
- 深圳外貿(mào)網(wǎng)站建設(shè)如何進(jìn)行優(yōu)化？ 2022-05-18
- 外貿(mào)網(wǎng)站建設(shè)需要做好哪些細(xì)節(jié)才能出彩？ 2015-10-08
- 針對(duì)外貿(mào)網(wǎng)站建設(shè)整理的要求 2017-02-25
- 外貿(mào)網(wǎng)站建設(shè)的作用有哪些？ 2022-12-06
- 成都外貿(mào)網(wǎng)站建設(shè)時(shí)如何判斷網(wǎng)站建設(shè)是否合格？ 2022-08-12
- 外貿(mào)網(wǎng)站建設(shè)為什么要做定制的？ 2022-12-15
- 外貿(mào)網(wǎng)站建設(shè)改版需要知道的知識(shí) 2022-12-22
- 外貿(mào)網(wǎng)站建設(shè)的要點(diǎn) 2022-01-10
- 成都外貿(mào)網(wǎng)站建設(shè)的建設(shè)原則 2023-02-26