如何實(shí)現(xiàn)在HTML頁(yè)面加載完畢后運(yùn)行js方法

如何實(shí)現(xiàn)在HTML頁(yè)面加載完畢后運(yùn)行js方法？這個(gè)問(wèn)題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見(jiàn)到的。希望通過(guò)這個(gè)問(wèn)題能讓你收獲頗深。下面是小編給大家?guī)?lái)的參考內(nèi)容，讓我們一起來(lái)看看吧！

Js方法：

<script type=”text/javascript”>window.onload=function (){    var userName=”xiaoming”;
    alert(userName);
}</script>

jQuery方法，需要引用jQuery文件：

<script type=”text/javascript”>$(document).ready(function (){    var userName=”xiaoming”;
    alert(userName);
});</script>

或者其簡(jiǎn)寫：

$(function (){var userName=”xiaoming”;
alert(userName);
});

在DOM加載完就可以執(zhí)行（比window.onload更早）。在同一頁(yè)面中可以多次出現(xiàn).ready()

兩者主要區(qū)別：Window.onload=function (){}:

當(dāng)一個(gè)文檔完全下載到瀏覽器中時(shí)，才會(huì)觸發(fā)window.onload事件。這意味著頁(yè)面上的全部元素對(duì)js而言都是可以操作的，也就是說(shuō)頁(yè)面上的所有元素加載完畢才會(huì)執(zhí)行。這種情況對(duì)編寫功能性代碼非常有利，因?yàn)闊o(wú)需考慮加載的次序。

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

會(huì)在DOM完全就緒并可以使用時(shí)調(diào)用。雖然這也意味著所有元素對(duì)腳本而言是可以訪問(wèn)的，但是，并不意味著所有關(guān)聯(lián)的文件都已經(jīng)下載完畢。換句話說(shuō)，當(dāng)HTML下載完成并解析為DOM樹之后，代碼就會(huì)執(zhí)行。

使用$(document).ready(function (){})一般來(lái)說(shuō)都要優(yōu)于使用onload事件處理程序，但必須要明確一點(diǎn)，因?yàn)橹С治募赡苓€沒(méi)有加載完成，所以類似圖像的高度和寬度這樣的屬性此時(shí)不一定有效。

注：用把js放在頁(yè)面底部的方法以及運(yùn)用defer=”defer”的方法都是會(huì)出現(xiàn)問(wèn)題的。最好使用$(document).ready(function (){})函數(shù)。

感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)如何實(shí)現(xiàn)在HTML頁(yè)面加載完畢后運(yùn)行js方法大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。