domReady的实现案例

(function(win){  'use strict';  var document = win.document,    readList = [],    // 等待执行的函数堆栈    flag = false;  var removeEvent = function(){    if(document.addEventListenner){      window.removeEventListenner('load',handle,false);    }else if(document.attachEvent){      window.detachEvent('onload',handle)      document.detachEvent('onreadystatechange',readyState);    }else{      window.onload = null;    }  },  handle = function(){    if(!flag){            while(readList.length){          readList[0].call();  //执行函数        readList.shift();  //删除第一个数组元素      }      flag = true;      removeEvent();    }  },  readyState = function(){    if(document.readyState == 'complete'){      handle();    }    },  DOMContentloaded=function(){    if(document.readyState == 'complete'){      setTimeout(handle);  // setTimeout 会使用最短时间，该时间不同系统并不一样。    }else if(document.addEventListenner){      document.addEventListenner('DOMContentLoaded',fn,false);      window.addEventListenner('load',handle,false);    }else if(document.attachEvent){      window.attachEvent('onload',handle);      document.attachEvent('onreadystatechange',readyState);  //onreadystatechange 事件在页面中含有iframe的时候，它会等待iframe加载完毕才会触发。            if(self === self.top){  // 当页面不在iframe中则使用此种方式检测doScroll方法是否可用。如果再iframe中则用onreadstatechange事件进行判断。        (function(){          try{            document.documentElement.doScroll('left');          }catch(e){            setTimeout(arguments.callee,50);  //arguments.callee 是对当前函数的引用。            return ;          }          handle();        }());      }    }else{      window.onload = handle;    }  },  ready = function(fn){    readList.push(fn);  // 加入待处理的堆栈中。    DOMContentloaded();  };  win.domReady = ready;}(window));

domReady(function(){   document.getElementById('box').innerHTML = (new Date().getTime() - date)/1000; });