快捷導(dǎo)航

兩種方法實現(xiàn)在HTML頁面加載完畢后運行某個js

更新時間：2014年06月16日 16:52:21 投稿：whsnow

這篇文章主要介紹了通過兩種方法實現(xiàn)在HTML頁面加載完畢后運行某個js,需要的朋友可以參考下

js方法：

 
<script type="text/javascript"> 

window.onload=function(){ 

var userName="xiaoming"; 

alert(userName); 
} 

</script>

以下為jQuery方法，需要引用jQuery文件。

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 

$(document).ready(function(){ 

var userName="xiaoming"; 

alert(userName); 
}); 

</script>

或者其簡寫

復(fù)制代碼代碼如下:

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

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

PS：兩者的主要區(qū)別

window.onload：

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

$(document).ready{ }：

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

舉一個例子：

假設(shè)有一個表現(xiàn)圖庫的頁面，這種頁面中可能會包含許多大型圖像，我們可以通過jQuery隱藏、顯示或以其他方式操作這些圖像。如果我們通過onload頁面設(shè)置界面，那么用戶在能夠使用這個頁面之前，必須要等到每一幅圖像都下載完成。更糟糕的是，如果行為稍微添加給哪些具有默認行為的元素(比如鏈接)，那么用戶的交互可能會導(dǎo)致意想不到的結(jié)果。然而當我們試用$(document).ready(){ }進行設(shè)置時，這個界面就會更早地準備好可用的正確行為。

使用$(document).ready(){ }一般來說都要優(yōu)于試用onload事件處理程序，但必須要明確一點的是，因為支持文件可能還沒有家在完成，所以類似圖像的高度和寬度這樣的屬性此時不一定有效。

注：用把js放在頁面底部的方法以及運用defer="defer" 的方法都是會出現(xiàn)問題的。最好使用上面的函數(shù)！

您可能感興趣的文章: