JQuery 之 在數據加載完成后才自動執行函數

　　數據加載完成執行：
　　$(window).load(function(){ ... });
　　進入頁就執行，不論等數據是否加載完成：
　　$(document).ready(function(){ ... })
　　這個還可以簡寫成
　　$(function(){ ... });

　　以下為解析：$(document).ready、body.Onload()和 $(window).load的區別

　　1、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 onload="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>

　　刷新也只執行一次

　　刷新后只讓$(window).load(function(){...})和body.onload()都執行一次的方法，cookie中實現（以body.onload()舉例，$(window).load也可以照樣改）

function loadpopup(){ 
    if (get_cookie('popped')==''){ 
        //這里放要執行的代碼，這樣就現實了只執行一次的
        document.cookie="popped=yes" ;
　　}
} 

< body onload="loadpopup()">        

 

　　調試技巧

　　為了調試方便，有時候在所有的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中，所以第二段代碼無法正確顯示。

 

　　非jquery中無$(document).ready方法

　　在 W3C 中有個叫 DOMContentLoaded 的事件, 它會在 DOM (文檔對象模型) 被加載完成的時候觸發。那么我們就可以通過下面的方法調用初始化腳本的方法了。 

　　但很遺憾，現在很多瀏覽器並不玩 W3C 這一套，支持 DOMContentLoaded 事件的只有 Firefox, Opera 9 等一些 "現代" 瀏覽器, 而被集成到兩大商業桌面系統的 IE 和 Safari 都不支持。盡管如此, 我們可以用別的一些方法進行處理。

 

方案一：

 

if (document.addEventListener){   //非ie瀏覽器
       document.addEventListener("DOMContentLoaded", init, false);
} else if (document.attachEvent){   //ie瀏覽器
       document.onreadystatechange=function(){         if (this.readyState == 'complete') {           init();          }      }}

 

方案二：

// 如果支持 W3C DOM2, 則使用 W3C 方法
if (document.addEventListener) {
	document.addEventListener("DOMContentLoaded", init, false);
 
// 如果是 IE 瀏覽器
} else if (/MSIE/i.test(navigator.userAgent)) {
	// 創建一個 script 標簽, 該標簽有 defer 屬性, 當 document 加載完畢時才會被載入
	document.write('<script id="__ie_onload" defer src="javascript:void(0)"></script>');
	var script = document.getElementById("__ie_onload");
	// 如果文檔確實裝載完畢, 調用初始化方法
	script.onreadystatechange = function() {
		if (this.readyState == 'complete') {
			init();
		}
	}
 
// 如果是 Safari 瀏覽器
} else if (/WebKit/i.test(navigator.userAgent)) {
	// 創建定時器, 每 0.01 秒檢驗一次, 如果文檔裝載完畢則調用初始化方法
	var _timer = setInterval( function() {
		if (/loaded|complete/.test(document.readyState)) {
			clearInterval(_timer);
			init();
		}
	}, 10);
 
// 如果以上皆不是, 使用最壞的方法 (本例中, Opera 7 將會跑到這里來)
} else {
	window.onload = function(e) {
		init();
	}
}

 

補充4：有window.onload，但是沒有document.onload

 

<script type="text/javascript">
<!--  
function $(id)  
{  
    return document.getElementById(id);  
}  
function show()  
{  
    alert($("btn").value);  
    if(document.attachEvent)  
    alert("load");  
} 
document.attachEvent("onload",show); 
//window.attachEvent("onload",show);
//window.onload=show;  
//document.onload=show();  
 -->
 </script>  
<body >  
<input type="button" value="button" id="btn">  
<hr>  
</body>