實作在HTML頁面載入完畢後運行js方法

本文主要和大家分享實作在HTML頁面載入完畢後運行js方法，主要以程式碼的方法和大家分享，希望能幫助大家。

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>

或是簡寫：

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

在DOM載入完就可以執行（比window.onload更早）。在同一頁面中可以多次出現.ready()

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

當一個文件完全下載到瀏覽器中時，才會觸發window.onload事件。這意味著頁面上的全部元素對js而言都是可以操作的，也就是說頁面上的所有元素載入完畢才會執行。這種情況對編寫功能性程式碼非常有利，因為無需考慮載入的次序。

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

會在DOM完全就緒並且可以使用時呼叫。雖然這也意味著所有元素對腳本而言是可以存取的，但是，並不意味著所有關聯的檔案都已經下載完畢。換句話說，當HTML下載完成並解析為DOM樹之後，程式碼就會執行。

使用$(document).ready(function (){})一般來說都要優於使用onload事件處理程序，但必須要明確一點，因為支援檔案可能還沒有載入完成，所以類似影像的高度和寬度這樣的屬性此時不一定有效。

附註：用把js放在頁面底部的方法以及運用defer=”defer」的方法都是會出現問題的。最好使用$(document).ready(function (){})函數。

相關推薦：

HTML頁面載入速度加快的介紹

以上是實作在HTML頁面載入完畢後運行js方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！