浏览器加载页面的顺序:
1、 解析HTML结构
2、 加载外部脚本和样式表文件
3、 解析并执行脚本代码
4、 构造HTML DOM模型==ready()
5、 加载图片等组件
6、 页面加载完毕==onload()
ready事件是在DOM模型构造完毕时触发
load事件是在页面加载完毕后触发
function ready(fn) {
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', function () {
//注销事件, 避免反复触发
document.removeEventListener('DOMContentLoaded', arguments.callee, false);
fn(); //执行函数
}, false);
} else if (document.attachEvent) { //IE
document.attachEvent('onreadystatechange', function () {
if (document.readyState == 'complete') {
document.detachEvent('onreadystatechange', arguments.callee);
fn(); //函数执行
}
});
}
};
ready()加强版
/*
* 传递函数给whenReady()
* 当文档解析完毕且为操作准备就绪时,函数作为document的方法调用
*/
var whenReady = (function () { //这个函数返回whenReady()函数
var funcs = []; //当获得事件时,要运行的函数
var ready = false; //当触发事件处理程序时,切换为true
//当文档就绪时,调用事件处理程序
function handler(e) {
if (ready) return; //确保事件处理程序只完整运行一次
//如果发生onreadystatechange事件,但其状态不是complete的话,那么文档尚未准备好
if (e.type === 'onreadystatechange' && document.readyState !== 'complete') {
return;
}
//运行所有注册函数
//注意每次都要计算funcs.length
//以防这些函数的调用可能会导致注册更多的函数
for (var i = 0; i < funcs.length; i ) {
funcs[i].call(document);
}
//事件处理函数完整执行,切换ready状态, 并移除所有函数
ready = true;
funcs = null;
}
//为接收到的任何事件注册处理程序
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', handler, false);
document.addEventListener('readystatechange', handler, false); //IE9
window.addEventListener('load', handler, false);
} else if (document.attachEvent) {
document.attachEvent('onreadystatechange', handler);
window.attachEvent('onload', handler);
}
//返回whenReady()函数
return function whenReady(fn) {
if (ready) { fn.call(document); }
else { funcs.push(fn); }
}
})();
//--------------------- test -----
function t1() {
console.log('t1');
}
function t2() {
console.log('t2');
}
// t2-t1-t2
whenReady(t1);
t2();
whenReady(t2);
更多专业前端知识,请上 【猿2048】www.mk2048.com