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