原生JS實現document.ready以及和window.onload的前後順序

jQuery 裏面的文檔就緒用法

在 jQuery裏面，咱們能夠看到兩種寫法:
$(function(){}) 和 $(document).ready(function(){})，
這兩個方法的效果都是同樣的，都是在dom文檔樹加載完以後執行一個函數,
（注意，這裏面的 ready 是 DOM樹加載完成，不是 onload的頁面資源加載完成的）。

document.ready方法

原生js自己並無提供 document.ready方法

//document是一個DOM對象，這個對象自己沒有ready方法，要使用就得本身定義，並且過程頗爲複雜
//其中一種方法是：
document.ready = function (callback) {
            ///兼容FF,Google
            if (document.addEventListener) {
                document.addEventListener('DOMContentLoaded', function () {
                    document.removeEventListener('DOMContentLoaded', arguments.callee, false);
                    callback();
                }, false)
            }
             //兼容IE
            else if (document.attachEvent) {
                document.attachEvent('onreadystatechange', function () {
                      if (document.readyState == "complete") {
                                document.detachEvent("onreadystatechange", arguments.callee);
                                callback();
                       }
                })
            }
            else if (document.lastChild == document.body) {
                callback();
            }
        }

//還有一種方法是：
(function () {
    var ie = !!(window.attachEvent && !window.opera);
    var wk = /webkit\/(\d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525);
    var fn = [];
    var run = function () { for (var i = 0; i < fn.length; i++) fn[i](); };
    var d = document;
    d.ready = function (f) {
      if (!ie && !wk && d.addEventListener)
        return d.addEventListener('DOMContentLoaded', f, false);
      if (fn.push(f) > 1) return;
      if (ie)
        (function () {
          try { d.documentElement.doScroll('left'); run(); }
          catch (err) { setTimeout(arguments.callee, 0); }
        })();
      else if (wk)
        var t = setInterval(function () {
          if (/^(loaded|complete)$/.test(d.readyState))
            clearInterval(t), run();
        }, 0);
    };
    })();

//實際使用的時候，上面兩種方法選一個便可使用 document.ready( function(){} );
//結論是原生js自己並無提供 document.ready方法

window.onload 在沒定義方法以前，它只是一個值爲null的屬性

//控制檯打印一下window,看看onload是什麼東東
window
//other...
onlanguagechange:null
onload:null
onloadeddata:null
//other...

//能夠看到window的onload屬性的值是null
//window.onload = function() {//code...}

//在使用的時候：先使用函數表達式的方式給它定義函數，很容易犯錯的是 將它看成函數直接使用。

document.ready 和 window.onload 的區別是：

上面定義的document.ready方法在DOM樹加載完成後就會執行，而window.onload是在頁面資源（好比圖片和媒體資源，它們的加載速度遠慢於DOM的加載速度）加載完成以後才執行。也就是說$(document).ready要比window.onload先執行。

驗證一下 ready 要比 onload 先執行：

window.onload = function () {
            alert('onload');
        };

        document.ready(function () {
            alert('ready');

        });

執行這段代碼以後，你會看到瀏覽器裏面會先彈出 ready,在彈出 onload。