$(document).ready、body.Onload()和 $(window).load的区别
JavaScript文檔加載完成事件?
window.load(function(){...})和body.onload()都存在同樣一個(gè)問(wèn)題，那都是在頁(yè)面所有元素(包括html標(biāo)簽以及引用到得所有圖片,Flash等媒體)加載完畢后執(zhí)行的,這是它們的共同點(diǎn).$(document).ready()是文檔結(jié)構(gòu)已經(jīng)加載完成（不包含圖片等非文字媒體文件），不必等到所有的加載完畢。
原理是：
$(document).ready(function (){ alert('use in page script tag') });
在jquery腳本加載的時(shí)候,會(huì)設(shè)置一個(gè)isReady的標(biāo)記,監(jiān)聽(tīng)DOMContentLoaded事件(這個(gè)不是什么瀏覽器都有的,不同瀏覽器,jquery運(yùn)作方式不一樣).當(dāng)然遇到調(diào)用ready函數(shù)的時(shí)候,如果isReady未被設(shè)置,那就是說(shuō)頁(yè)面未加載完,就會(huì)把要執(zhí)行的函數(shù)用一個(gè)數(shù)組緩存起來(lái),當(dāng)頁(yè)面加載完后,再把緩存的函數(shù)一一執(zhí)行.
另外補(bǔ)充：
jquery ready可以寫(xiě)好幾個(gè)，每個(gè)都執(zhí)行?
onload只能寫(xiě)一個(gè)，你寫(xiě)好幾個(gè)，也只執(zhí)行一個(gè)，好像是執(zhí)行最后一個(gè)，而$(window).load()可以加載多個(gè)函數(shù)
?
用$(window).load(function(){...})而不用body.onload()的幾個(gè)理由
不用body.Onload()理由1：
如果我們想同時(shí)加載多個(gè)函數(shù),我們必須這樣寫(xiě)
<body οnlοad="fn1(),fn2()"></body>看起來(lái)極其丑陋,如果用$(window).load()我們可以這樣加載多個(gè)函數(shù)
?$(window).load(function() {
??????????? alert("hello,我是jQuery!");
??});
?$(window).load(function() {
?? ? ? ?alert("hello,我也是jQuery");
?});
這樣寫(xiě)它會(huì)從上往下執(zhí)行這兩個(gè)函數(shù),并且看起來(lái)漂亮多了.
不用body.Onload()理由2：
用body.Onload()不能夠做到j(luò)s和html完全分離,這是一個(gè)很?chē)?yán)重的問(wèn)題.
另外用$(window).load(function(){...})和body.onload()都存在同樣一個(gè)問(wèn)題,因?yàn)殚_(kāi)始也說(shuō)到了,它們都需要等到頁(yè)面的所有內(nèi)容
加載完畢才執(zhí)行,但是如果當(dāng)網(wǎng)速比較慢的時(shí)候,加載一個(gè)頁(yè)面往往需要較長(zhǎng)的時(shí)間(幾秒到十幾秒不等,甚至更長(zhǎng)...),所以我們經(jīng)常
會(huì)遇到頁(yè)面還沒(méi)有完全加載完畢而用戶已經(jīng)在操作頁(yè)面了這種情況,這樣頁(yè)面表現(xiàn)出來(lái)的效果就跟我們預(yù)期的效果不一樣了,
所以在這里我推薦使用$(document).ready(function(){}),或簡(jiǎn)寫(xiě)為$(function(){})，因?yàn)樗麜?huì)在頁(yè)面的dom元素加載完畢后就執(zhí)行,
而無(wú)需等到圖片或其他媒體下載完畢.
但是有時(shí)候確實(shí)我們有需要等到頁(yè)面的所有東西都加載完后再執(zhí)行我們想執(zhí)行的函數(shù),所以是該使用$(window).load(function(){...})還是
該使用$(function(){})往往需要結(jié)合具體需要而作不同的選擇.
最后附上一段在所有DOM元素加載之前執(zhí)行的jQuery代碼
<script type="text/javascript">
(function() {
??????????? alert("DOM還沒(méi)加載哦!");
??????? })(jQuery)
</script>
補(bǔ)充1：刷新也只執(zhí)行一次
刷新后只讓$(window).load(function(){...})和body.onload()都執(zhí)行一次的方法，cookie中實(shí)現(xiàn)（以body.onload()舉例，$(window).load也可以照樣該）
function loadpopup(){?
if (get_cookie('popped')==''){?
//這里放要執(zhí)行的代碼，這樣就現(xiàn)實(shí)了只執(zhí)行一次的
document.cookie="popped=yes" ;
}
}?
</script>
</head>?
<body οnlοad="loadpopup()">
補(bǔ)充2：調(diào)試技巧
為了調(diào)試方便，有時(shí)候在所有的DOM加載之前調(diào)用JS代碼，這個(gè)方法是我在調(diào)試的時(shí)候最喜歡的，有時(shí)候開(kāi)發(fā)的時(shí)候也用這種方法
<body>
??? <script type="text/javascript">
??????? (function() {
??????????? alert("hi");
??????? })(jQuery)
??? </script>
</body>
對(duì)，就是利用js閉包的形式將js代碼嵌入body，這段代碼會(huì)自動(dòng)執(zhí)行，當(dāng)然也可以直接嵌入js代碼,這種方式要注意順序問(wèn)題，如下：
<body>
<div id="test">this is the content</div>
??? <script type="text/javascript">
??????? alert($("#test").html());//I Can display the content
??????????? </script>
</body>
<body>
?? <script type="text/javascript">
??????? alert($("#test").html());//I Can't display the content
??????????? </script>
??? <div id="test">this is the content</div>
</body>
上面兩段代碼,第二段代碼當(dāng)中因?yàn)橹荒芙忉尩疆?dāng)前代碼之前的DOM,而test并不存在于已經(jīng)解析的DOM中.所以第二段代碼無(wú)法正確顯示
補(bǔ)充3：非jquery中無(wú)$(document).ready方法
在 W3C 中有個(gè)叫 DOMContentLoaded 的事件, 故名思意, 它會(huì)在 DOM (文檔對(duì)象模型) 被加載完成的時(shí)候觸發(fā). 那么我們就可以通過(guò)下面的方法調(diào)用初始化腳本的方法了.
但很遺憾, 現(xiàn)在很多瀏覽器并不玩 W3C 這一套, 支持 DOMContentLoaded 事件的只有 Firefox, Opera 9 等一些 "現(xiàn)代" 瀏覽器, 而被集成到兩大商業(yè)桌面系統(tǒng)的 IE 和 Safari 都不支持. 盡管如此, 我們可以用別的一些方法進(jìn)行處理.
方案一：
[html]?view plaincopy方案二：
[html]?view plaincopy
補(bǔ)充4：有window.onload，但是沒(méi)有document.onload
總結(jié)
以上是生活随笔為你收集整理的$(document).ready、body.Onload()和 $(window).load的区别的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 《雪国》—— 读后总结
- 下一篇： Angular - - $cacheF