DOMContentLoaded和load

/*
* IE9以及现代浏览器新增了一个DOM构建完毕的事件DOMContentLoaded,
* 这个事件触发的时间要比load快，
* 因为这个事件只涉及DOM的构建，不涉及其他资源的加载。
* */

window.addEventListener( 'load', function() {
var spans = document.querySelectorAll('span');
console.log( spans, 'load' );
} );

document.addEventListener( 'DOMContentLoaded', function() {
var spans = document.querySelectorAll('span');
console.log( spans, 'DOMContentLoaded' );
} );

结果:=====>

先输出:'DOMContentLoaded'

后输出:'load'

// 如果是现代浏览器，readyState值为interactive或者complete，证明DOM构建完毕，fn直接执行
if ( document.addEventListener &&
( document.readyState === 'interactive' || document.readyState === 'complete' ) ) {
return fn();
}
// IE老版本浏览器，readyState值只有为complete，才能保证DOM构建完毕，fn才能执行
else if (document.readyState === 'complete'){
return fn();
}

/*
* 实现思路：
* 1、判断是否支持addEventListener，支持则绑定DOMContentLoaded事件
* 2、不支持则用attchEvent绑定onreadystatechange事件
* */

if( document.addEventListener ) {
document.addEventListener( 'DOMContentLoaded', fn );
}else {
document.attachEvent( 'onreadystatechange', function() {
if( document.readyState === 'complete' ) {
fn();
}
} );
}
}

ready(function(){
console.log('DOM构建完毕1');
});
setTimeout(function(){
ready(function(){
console.log('DOM构建完毕2');
});
},3000);

结果:===>

先输出:DOM构建完毕1

3秒后输出:DOM构建完毕2

window.addEventListener('load', function() {
console.log('资源全部加载完毕1');
});

// 3秒后，再给load添加一个事件处理函数，
// 这个时候，load事件可能已经触发过了，
// 如果触发过了，那我们新增的事件处理函数相当于无效，永远不会被执行。
setTimeout( function() {
window.addEventListener('load', function() {
console.log('资源全部加载完毕2');
});
}, 3000);

巴特西

DOMContentLoaded和load

最新文章

热门文章