window.onload和JQuery中$(function(){})的區別即其實現原理

1、區別

window.onload必須等到頁面內包括圖片的全部元素加載完畢後才能執行。

在Jquery中$(function(){ })和$(document).ready(function(){ })的效果是同樣，是在DOM樹加載完成以後（DOM樹加載完不表明所有資源加載完，例如圖片，音頻和視頻等還沒加載）就會執行。因此$(document).ready(function(){ })是比window.onload要先執行的。那麼JQuery中$(document).ready(function(){ })用原生js是怎麼實現的呢？

2、實現

給document添加一個函數：

document.ready = function (callback) {
//兼容Firefox和Chrome
　　if (document.addEventListener) {
　　　　document.addEventListener('DOMContentListener', function () {
　　　　document.removeEventListener('DOMContentListener', arguments.callee, false);
　　　　callback();
　　},false);
　　}else if (document.attachEvent) {//兼容IE
　　　　　　　　document.attachEvent('onreadystatechange', function () {
　　　　　　　　if (document.readyState == 'complete') {
　　　　　　　　document.detachEvent('onreadystatechange', arguments.calle);
　　　　　　　　callback();
　　}
});
}else if (document.lastChild == document.body) {
　　　　　　　callback();
　　　　　　}
}

（1）兼容Firefox和Chrome　

　　兼容Firefox和Chrome，給document加一個事件監聽，監聽DOMContentListener事件，它是當初始的HTML文檔被徹底加載和解析後觸發的事件，也就是dom樹加載完後觸發的事件。事件觸發後移除監聽執行callback函數。這裏的arguments是函數內部的對象，表明當前函數參數的數組，arguments.callee表示引用當前正在執行的函數。addEventListener/removeEventListener的第三個參數默認爲false，false表示在事件冒泡階段處理事件處理程序，true表示在事件捕獲階段處理。

（2）兼容IE

　　兼容IE，onreadystatechange在DOM文檔的readyState發生改變是觸發的，readyState有五種狀態，「complete」：所有資源加載完；「uninitialized」：初始狀態；「loading」：資源加載中；「loaded」：document加載完成；「interactive」：已加載並可與用戶交互，但還須要加載圖片等其餘資源。看到這裏是否是有個疑惑，在代碼中咱們寫的是if(document.readyState == "complete")而後執行callback，這不是在資源加載完後（包括圖片等）後才執行callback嗎？咱們要實現的功能不是應該readyState == 「interactive」時，即DOM樹加載完成後執行callback的嗎？這裏我也很疑惑，而後就翻看JQuery的源碼（雖然大多看不懂，只能看個大概），我發現他是這樣寫的

紅色框的部分說：做者嘗試過用readyState == "interactive"，可是形成了某些問題。

因此那就這樣寫吧，readyState == 「complete」。

 

 

樓主能力有限，若有不正確的地方但願指出

 

 

 

 

 

 

 

 

兼容Firefox和Chrome