dperini / contentloaded Goto Github PK

bower install contentloaded

function contentLoaded(win, fn) {
  var done = false,
    top = true,
    doc = win.document,
    root = doc.documentElement,
    modern = doc.addEventListener,

    add = modern ? 'addEventListener' : 'attachEvent', //IE9-,chrome
    rem = modern ? 'removeEventListener' : 'detachEvent', //IE9-,chrome
    pre = modern ? '' : 'on',

    init = function(e) { //参数e是一个事件有这几个状态readystatechange,DOMContentLoaded,load
      if (e.type == 'readystatechange' && doc.readyState != 'complete') return; //直到readystatechange&& !complete back;
    //  console.log(3);
      (e.type == 'load' ? win : doc)[rem](pre + e.type, init, false); //成功了之后移除事件 3个事件都被移除
      if (!done && (done = true)) { //但是这里只要有一次成功了之后就设置done为true，所以fn最终只执行了一次
        fn.call(win, e.type || e); //执行fn，后面参数是什么无所谓
      }
    },
    poll = function() { //兼容IE
      try {
        console.log("try");
        root.doScroll('left');//doScroll，IE自带函数,IE9-会跳入catch,等待doscroll可以访问就是已经DOMContentLoaded
      } catch (e) {
        setTimeout(poll, 50);
        return; //跳出poll
      }
    init("poll");//必须传参数，参数是什么无所谓
    };
  if (doc.readyState == 'complete') {//如果到了这里才执行那就是很慢了，lazy
    fn.call(win, 'lazy'); //就是fn.call(window)
  } else {
    //第一步执行这里，如果还没到complete
    if (!modern && root.doScroll) {//IE9-
      try {//这里不知道是做什么的
        top = !win.frameElement;
      } catch (e) {
      }
      if (top) {//测试top一直都是true
        poll();//所以IE这里肯定会执行,catch之后,执行下面的3个事件
      }
    }else{//此处在原文上添加else，这就合理了~
        //感觉略为不合理，IE也会执行下面3个事件
        doc[add](pre + 'DOMContentLoaded', init, false);//这里执行了3次init，每个阶段都执行一次
        doc[add](pre + 'readystatechange', init, false);
        win[add](pre + 'load', init, false);
    }
    
  }
}
···