快捷導(dǎo)航

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

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

這篇文章主要介紹了通過兩種方法實(shí)現(xiàn)在HTML頁面加載完畢后運(yùn)行某個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); 
}); 

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

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

window.onload：

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

$(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事件處理程序，但必須要明確一點(diǎn)的是，因?yàn)橹С治募赡苓€沒有家在完成，所以類似圖像的高度和寬度這樣的屬性此時不一定有效。

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

您可能感興趣的文章:

相關(guān)文章

JS浮點(diǎn)數(shù)運(yùn)算結(jié)果不精確的Bug解決
這篇文章主要給大家介紹了關(guān)于JS浮點(diǎn)數(shù)運(yùn)算結(jié)果不精確的Bug解決，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
JS獲取URL中的參數(shù)數(shù)據(jù)
這篇文章主要介紹了JS獲取URL中的參數(shù)數(shù)據(jù)，有需要的朋友可以參考一下
2013-12-12
js 索引下標(biāo)之li集合綁定點(diǎn)擊事件
本文通過一段實(shí)例代碼給大家講解了js索引下標(biāo)之li集合綁定點(diǎn)擊事件的相關(guān)知識，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧
2018-01-01
JS實(shí)現(xiàn)來回出現(xiàn)文字的狀態(tài)欄特效代碼
這篇文章主要介紹了JS實(shí)現(xiàn)來回出現(xiàn)文字的狀態(tài)欄特效代碼,針對文字的定義及狀態(tài)欄的定時顯示等實(shí)現(xiàn)方法備有詳細(xì)的文字說明,需要的朋友可以參考下
2015-10-10
JS使用定時器與事件監(jiān)聽實(shí)現(xiàn)輪播圖切換功能
現(xiàn)在很多網(wǎng)站都有輪播圖,下面這篇文章主要給大家介紹了關(guān)于JS如何使用定時器與事件監(jiān)聽實(shí)現(xiàn)輪播圖切換功能的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-11-11
JS鼠標(biāo)3次點(diǎn)擊事件實(shí)現(xiàn)代碼及擴(kuò)展思路
這篇文章主要介紹了JS鼠標(biāo)3次點(diǎn)擊事件實(shí)現(xiàn)及擴(kuò)展思路,需要的朋友可以參考下
2017-09-09
動態(tài)加載iframe時get請求傳遞中文參數(shù)亂碼解決方法
這篇文章主要介紹了動態(tài)加載iframe時get請求傳遞中文參數(shù)亂碼解決方法,需要的朋友可以參考下
2014-05-05
JS小球拋物線軌跡運(yùn)動的兩種實(shí)現(xiàn)方法詳解
這篇文章主要介紹了JS小球拋物線軌跡運(yùn)動的兩種實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了javascript實(shí)現(xiàn)小球拋物線運(yùn)動的相關(guān)計算與圖形繪制操作技巧,需要的朋友可以參考下
2017-12-12
微信小程序用戶授權(quán)環(huán)節(jié)實(shí)現(xiàn)過程
這篇文章主要介紹了微信小程序用戶授權(quán)環(huán)節(jié)實(shí)現(xiàn)過程，在商城項(xiàng)目中，我們需要對部分的頁面，進(jìn)行一個授權(quán)的判別，例如購物車，及個人中心，需要完成用戶信息的授權(quán)后，獲取到相關(guān)信息
2023-01-01
JSON常用解析框架使用操作詳解
這篇文章主要為大家介紹了JSON常用解析框架使用操作詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-11-11