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