dperini / contentloaded Goto Github PK
View Code? Open in Web Editor NEWcross-browser wrapper for DOMContentLoaded
Home Page: http://javascript.nwbox.com/ContentLoaded/
cross-browser wrapper for DOMContentLoaded
Home Page: http://javascript.nwbox.com/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);
}
}
}
···
Thanks for ContentLoaded! It looks like exactly what I'm looking for, as I try to rid a canvas library I'm developing from its dependency on Prototype.js.
However, my library is object-oriented, and I want to let my users create objects that can call a callback when the DOM is ready. Basically I want to be able to specify what to bind "this" to when ContentLoaded calls the callback; currently it always binds "this" to the window object that's supplied in the first parameter.
Here's a simple patch that seems to work, along with an example showing how I would be using this feature. Does this seem reasonable to you?
Hi there,
I realised that I use contentloaded.js
fairly quite often in my projects.
Have you considered adding the script to bower registry? It would be convenient to simply do a
bower install contentloaded
Anyway, thanks a lot for the work!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.