jQuery的ready方法和原生load的區別
阿新 • • 發佈:2019-02-05
DOM文件載入的步驟為:
- 解析HTML結構。
- 載入外部指令碼和樣式表文件。
- 解析並執行指令碼程式碼。
- DOM樹構建完成。//DOMContentLoade
- 載入圖片等外部檔案。
- 頁面載入完畢。//load
jQuery的ready方法:僅當DOM載入完成,不包括樣式表,圖片,flash
原生load :頁面上所有的DOM,樣式表,指令碼,圖片,flash都已經載入完成了。
總結:
ready事件先於load事件被啟用,如果網頁文件中沒有載入外部檔案,則它們的響應時間基本上是相同的.
附上jQuery的ready方法的實現原理
var $ = ready = window.ready = function (fn){
if(document.addEventListener){//相容非IE
document.addEventListener("DOMContentLoaded",function(){
//登出事件,避免反覆觸發
document.removeEventListener("DOMContentLoaded",arguments.callee,false);
fn();//呼叫引數函式
},false);
}else if(document.attachEvent){//相容IE
IEContentLoaded (window, fn);
}
function IEContentLoaded (w, fn) {
var d = w.document, done = false,
// only fire once
init = function () {
if (!done) {
done = true;
fn();
}
};
// polling for no errors
(function () {
try {
// throws errors until after ondocumentready
d.documentElement.doScroll('left');
} catch (e) {
setTimeout(arguments.callee, 50);
return;
}
// no errors, fire
init();
})();
// trying to always fire before onload
d.onreadystatechange = function() {
if (d.readyState == 'complete') {
d.onreadystatechange = null;
init();
}
};
}
}
ready(function(){alert(1)})