兩種方法實現(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文件。
<script type="text/javascript">
$(document).ready(function(){
var userName="xiaoming";
alert(userName);
});
</script>
或者其簡寫
$(function(){
var userName="xiaoming";
alert(userName);
});
當(dāng)dom加載完就可以執(zhí)行（比window.onload更早）。在同一個頁面里可以多次出現(xiàn).ready()
PS：兩者的主要區(qū)別
window.onload：
當(dāng)一個文檔完全下載到瀏覽器中時，才會觸發(fā)window.onload事件。這意味著頁面上的全部元素對js而言都是可以操作的，也就是說頁面上的所有元素加載完畢才會執(zhí)行。這種情況對編寫功能性代碼非常有利，因為無需考慮加載的次序。、
$(document).ready{ }：
會在DOM完全就緒并可以使用時調(diào)用。雖然這也意味著所有元素對腳本而言都是可以訪問的，但是，并不意味著所有關(guān)聯(lián)的文件都已經(jīng)下載完畢。換句話說，當(dāng)HMTL下載完成并解析為DOM樹之后，代碼就會執(zhí)行。
舉一個例子：
假設(shè)有一個表現(xiàn)圖庫的頁面，這種頁面中可能會包含許多大型圖像，我們可以通過jQuery隱藏、顯示或以其他方式操作這些圖像。如果我們通過onload頁面設(shè)置界面，那么用戶在能夠使用這個頁面之前，必須要等到每一幅圖像都下載完成。更糟糕的是，如果行為稍微添加給哪些具有默認(rèn)行為的元素(比如鏈接)，那么用戶的交互可能會導(dǎo)致意想不到的結(jié)果。然而當(dāng)我們試用$(document).ready(){ }進(jìn)行設(shè)置時，這個界面就會更早地準(zhǔn)備好可用的正確行為。
使用$(document).ready(){ }一般來說都要優(yōu)于試用onload事件處理程序，但必須要明確一點的是，因為支持文件可能還沒有家在完成，所以類似圖像的高度和寬度這樣的屬性此時不一定有效。
注：用把js放在頁面底部的方法以及運用defer="defer" 的方法都是會出現(xiàn)問題的。最好使用上面的函數(shù)！
復(fù)制代碼 代碼如下:
<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);
});
當(dāng)dom加載完就可以執(zhí)行（比window.onload更早）。在同一個頁面里可以多次出現(xiàn).ready()
PS：兩者的主要區(qū)別
window.onload：
當(dāng)一個文檔完全下載到瀏覽器中時，才會觸發(fā)window.onload事件。這意味著頁面上的全部元素對js而言都是可以操作的，也就是說頁面上的所有元素加載完畢才會執(zhí)行。這種情況對編寫功能性代碼非常有利，因為無需考慮加載的次序。、
$(document).ready{ }：
會在DOM完全就緒并可以使用時調(diào)用。雖然這也意味著所有元素對腳本而言都是可以訪問的，但是，并不意味著所有關(guān)聯(lián)的文件都已經(jīng)下載完畢。換句話說，當(dāng)HMTL下載完成并解析為DOM樹之后，代碼就會執(zhí)行。
舉一個例子：
假設(shè)有一個表現(xiàn)圖庫的頁面，這種頁面中可能會包含許多大型圖像，我們可以通過jQuery隱藏、顯示或以其他方式操作這些圖像。如果我們通過onload頁面設(shè)置界面，那么用戶在能夠使用這個頁面之前，必須要等到每一幅圖像都下載完成。更糟糕的是，如果行為稍微添加給哪些具有默認(rèn)行為的元素(比如鏈接)，那么用戶的交互可能會導(dǎo)致意想不到的結(jié)果。然而當(dāng)我們試用$(document).ready(){ }進(jìn)行設(shè)置時，這個界面就會更早地準(zhǔn)備好可用的正確行為。
使用$(document).ready(){ }一般來說都要優(yōu)于試用onload事件處理程序，但必須要明確一點的是，因為支持文件可能還沒有家在完成，所以類似圖像的高度和寬度這樣的屬性此時不一定有效。
注：用把js放在頁面底部的方法以及運用defer="defer" 的方法都是會出現(xiàn)問題的。最好使用上面的函數(shù)！
您可能感興趣的文章:
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于JS浮點數(shù)運算結(jié)果不精確的Bug解決，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要介紹了JS獲取URL中的參數(shù)數(shù)據(jù)，有需要的朋友可以參考一下2013-12-12
本文通過一段實例代碼給大家講解了js索引下標(biāo)之li集合綁定點擊事件的相關(guān)知識，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-01-01
JS實現(xiàn)來回出現(xiàn)文字的狀態(tài)欄特效代碼
這篇文章主要介紹了JS實現(xiàn)來回出現(xiàn)文字的狀態(tài)欄特效代碼,針對文字的定義及狀態(tài)欄的定時顯示等實現(xiàn)方法備有詳細(xì)的文字說明,需要的朋友可以參考下2015-10-10
JS使用定時器與事件監(jiān)聽實現(xiàn)輪播圖切換功能
現(xiàn)在很多網(wǎng)站都有輪播圖,下面這篇文章主要給大家介紹了關(guān)于JS如何使用定時器與事件監(jiān)聽實現(xiàn)輪播圖切換功能的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
JS鼠標(biāo)3次點擊事件實現(xiàn)代碼及擴展思路
這篇文章主要介紹了JS鼠標(biāo)3次點擊事件實現(xiàn)及擴展思路,需要的朋友可以參考下2017-09-09
動態(tài)加載iframe時get請求傳遞中文參數(shù)亂碼解決方法
這篇文章主要介紹了動態(tài)加載iframe時get請求傳遞中文參數(shù)亂碼解決方法,需要的朋友可以參考下2014-05-05
這篇文章主要介紹了JS小球拋物線軌跡運動的兩種實現(xiàn)方法,結(jié)合實例形式分析了javascript實現(xiàn)小球拋物線運動的相關(guān)計算與圖形繪制操作技巧,需要的朋友可以參考下2017-12-12
微信小程序用戶授權(quán)環(huán)節(jié)實現(xiàn)過程
這篇文章主要介紹了微信小程序用戶授權(quán)環(huán)節(jié)實現(xiàn)過程，在商城項目中，我們需要對部分的頁面，進(jìn)行一個授權(quán)的判別，例如購物車，及個人中心，需要完成用戶信息的授權(quán)后，獲取到相關(guān)信息2023-01-01
這篇文章主要為大家介紹了JSON常用解析框架使用操作詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11