ContentLoaded
ContentLoaded copied to clipboard
有一个地方不合理,估计是少写了一个else,然后添加了注释
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);
}
}
}
···