js頁面加載后執(zhí)行的幾種方式分別是什么,針對(duì)這個(gè)問題,這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答,希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。
成都創(chuàng)新互聯(lián)專注于企業(yè)全網(wǎng)整合營銷推廣、網(wǎng)站重做改版、閔行網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、html5、商城網(wǎng)站制作、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù),價(jià)格優(yōu)惠性價(jià)比高,為閔行等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。在實(shí)際應(yīng)用中往往需要在頁面加載完畢之后再去執(zhí)行相關(guān)的js代碼,之所以這么操作是有道理的,如果是操作dom元素,如果相關(guān)元素沒有加載完成,而去執(zhí)行js代碼,可能會(huì)導(dǎo)致錯(cuò)誤,下面就介紹一下如何實(shí)現(xiàn)頁面加載完成再去執(zhí)行代碼,這是最為基礎(chǔ)的知識(shí)了,可能初學(xué)者還不太了解,寄希望能夠給需要的朋友帶來一定幫助。
一.window.onload事件:
代碼如下:
原生js
window.onload=function(){ //code}
jquery
$(window).load(function(){//code});
當(dāng)頁面完全加載完畢之后再去執(zhí)行code代碼。說明頁面需要dom操作,必須到最后才可以執(zhí)行。
二.使用jQuery的ready事件:
$(document).ready(function() { //code});
一般
(function () {//code}})();
當(dāng)穩(wěn)當(dāng)結(jié)構(gòu)加載完畢再去執(zhí)行code代碼。
通用的頁面加載后再運(yùn)行JS有兩種方式:1、在DOM加載完畢后,頁面全部內(nèi)容(如圖片等)完全加載完畢前運(yùn)行JS。 2、在頁面全部內(nèi)容加載完成(包括引用文件,圖片等)之后再加載JS
1、在DOM加載后,全部內(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í)不一定有效。要解決這個(gè)問題,可以使用Jquery中 load()方法在需要的文件加載完畢后對(duì)其進(jìn)行操作。
$(document).ready(function(){});$().ready(function(){}) //簡寫 當(dāng)$()不帶參數(shù)時(shí)默認(rèn)就是document$(function(){}); //簡寫
2、在全部內(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.頁面加載完畢,執(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加載完成,就會(huì)執(zhí)行aaa()方法。注:第1種是第2種的簡寫方式。兩個(gè)是document加載完成后就執(zhí)行方法。第3種和第4種都是等到整個(gè)window加載完成執(zhí)行方法體。兩者也沒有區(qū)別,只是一個(gè)使用dom對(duì)象,一個(gè)使用jQuery對(duì)象。
執(zhí)行順序:1和2無論放在哪里都是最先執(zhí)行,3和4在其之后執(zhí)行,5最后執(zhí)行
關(guān)于js頁面加載后執(zhí)行的幾種方式分別是什么問題的解答就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。