1. 程式人生 > >jQuery的ready方法和原生load的區別

jQuery的ready方法和原生load的區別

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)})