window.onload
window.onload
load事件通常用于檢測文檔內(nèi)容或者圖片是否加載完畢蛋勺。
網(wǎng)頁中的某些JavaScript腳本代碼往往需要在文檔加載完成后才能夠去執(zhí)行瓦灶，否則可能導(dǎo)致無法獲取對象的情況，為了避免類似情況的發(fā)生抱完，可以使用以下兩種方式:
- 將腳本代碼放在網(wǎng)頁的底端贼陶，運行腳本代碼的時候，可以確保要操作的對象已經(jīng)加載完成碉怔。
- 通過window.onload來執(zhí)行腳本代碼。
示例：
<style type="text/css">
#bg{
width:100px;
height:100px;
border:2px solid red;
}
</style>
<script type="text/javascript">
document.getElementById("bg").style.backgroundColor="#F90";
</script>
</head>
<body>
<div id="bg"></div>
</body>
代碼的初衷是將div的背景顏色設(shè)置為#F90禁添，但是并沒有實現(xiàn)此效果，因為代碼是順序執(zhí)行的上荡，當執(zhí)行到document.getElementById("#bg").style.backgroundColor="#F90"的時候趴樱，還沒有加載到此div對象酪捡，所以設(shè)置也就不能夠成功。代碼修改如下:
<style type="text/css">
#bg{
width:100px;
height:100px;
border:2px solid red;
}
</style>
<script type="text/javascript">
window.onload=function(){
document.getElementById("bg").style.backgroundColor="#F90";
}
</script>
</head>
<body>
<div id="bg"></div>
</body>
$(document).ready
$(document).ready
定義和用法
當 DOM（文檔對象模型） 已經(jīng)加載逛薇，并且頁面（包括圖像）已經(jīng)完全呈現(xiàn)時，會發(fā)生 ready 事件永罚。
由于該事件在文檔就緒后發(fā)生啤呼，因此把所有其他的 jQuery 事件和函數(shù)置于該事件中是非常好的做法。正如上面的例子中那樣呢袱。
ready() 函數(shù)規(guī)定當 ready 事件發(fā)生時執(zhí)行的代碼官扣。
ready() 函數(shù)僅能用于當前文檔，因此無需選擇器羞福。
兩者區(qū)別
- 兩個方法執(zhí)行的時間是不一樣的
-
window.onload必須等到頁面內(nèi)包括圖片的所有元素加載完畢后才能執(zhí)行惕蹄。 -
$(document).ready()是DOM結(jié)構(gòu)繪制完畢后就執(zhí)行，不必等到加載完畢治专。 - 假如用window.onload卖陵，頁面上的js有個報錯或者找不到圖片等資源，就會一直等著张峰。
- 兩個方法重復(fù)執(zhí)行的問題
-
window.onload只能執(zhí)行一次泪蔫，假如寫了多個該方法只執(zhí)行最后的一個。 -
$(document).ready()可以寫多個喘批，執(zhí)行順序是按照編寫的順序進行執(zhí)行撩荣。 - 如果兩個方法都寫了铣揉，那么
$(document).ready()是比window.onload要先執(zhí)行的。
- 簡化寫法
-
window.onload沒有簡化寫法 -
$(document).ready(function(){})可以簡寫成$(function(){}); -
$(document).ready()方法和window.onload方法有相似的功能婿滓，但是在執(zhí)行時機方面是有區(qū)別的老速。window.onload方法是在網(wǎng)頁中所有的元素（包括元素的關(guān)聯(lián)文件）完全加載到瀏覽器后才執(zhí)行，即JavaScript此時才可以訪問網(wǎng)頁中的任何元素凸主。而通過jQuery中的$(document).ready()方法注冊的事件處理程序橘券，可以在DOM完全就緒時就可以被調(diào)用。此時卿吐，網(wǎng)頁的所有元素對jQuery而言都是可以訪問的旁舰，但是，這并不意味著這些元素關(guān)聯(lián)的文件都已經(jīng)下載完畢嗡官。
document.onDOMContentLoaded
document.onDOMContentLoaded
當 DOMContentLoaded 事件觸發(fā)時箭窜，僅當DOM加載完成，不包括樣式表衍腥，圖片磺樱，flash
開發(fā)中我們經(jīng)常需要給一些元素的事件綁定處理函數(shù)。但問題是婆咸，如果那個元素還沒有加載到頁面上竹捉，但是綁定事件已經(jīng)執(zhí)行完了，是沒有效果的尚骄。這兩個事件大致就是用來避免這樣一種情況块差，將綁定的函數(shù)放在這兩個事件的回調(diào)中，保證能在頁面的某些元素加載完畢之后再綁定事件的函數(shù)倔丈。
當然DOMContentLoaded機制更加合理憨闰，因為我們可以容忍圖片，flash延遲加載需五，卻不可以容忍看見內(nèi)容后頁面不可交互鹉动。
