1. 程式人生 > >在HTML頁面載入完畢後執行某個js

在HTML頁面載入完畢後執行某個js

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

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

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

 

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

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

 

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

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);

});

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