如何寫一個DOM加載完成的執行行數

像在jquery中會有

$(function(){})

或者

$.ready(function(){})

來使代碼在DOM加載完成後執行。那麼這裡面的原理是怎麼樣的。先看下面代碼：

ready: function(fn) {
    var fired = false;

    function trigger() {
      if (fired) return;
      fired = true;
      fn();
    }

    // check if document already is loaded
    if (document.readyState === 'complete'){
      setTimeout(trigger);
    } else {
      this.on('DOMContentLoaded', trigger); // works for modern browsers and IE9
      // we can not use jqLite since we are not done loading and jQuery could be loaded later.
      // jshint -W064
      JQLite(window).on('load', trigger); // fallback to window.onload for others
      // jshint +W064
    }
  },
           

這個是jQLite的ready方法，可以看出，主要是利用了document的readystate和window的load事件。

document.readyState

主要有三個參數：loading，interactive，complete。

• loading表示document正在加載中；
• interactive表示document加載完成了，但是資源例如圖檔樣式等還沒有加載完；
• completer表示所有都加載完了；

以下是相容性：

再說說DOMContentLoaded(不支援IE8)與load事件：

DOM文檔加載的步驟為

1. 解析HTML結構。
2. 加載外部腳本和樣式表檔案。
3. 解析并執行腳本代碼。
4. DOM樹建構完成。//DOMContentLoaded
5. 加載圖檔等外部檔案。
6. 頁面加載完畢。//load

用原生js可以這麼寫

// 不相容老的浏覽器，相容寫法見[jQuery中ready與load事件](http://www.imooc.com/code/)，或用jQuery
document.addEventListener("DOMContentLoaded", function() {
   // ...代碼...
}, false);

window.addEventListener("load", function() {
    // ...代碼...
}, false);
           

用jQuery這麼寫

// DOMContentLoaded
$(document).ready(function() {
    // ...代碼...
});

//load
$(document).load(function() {
    // ...代碼...
});