/*
* 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的更多相关文章

  1. js DomContentLoaded 和 load 的区别

    如题:DOMContentLoaded和load都是页面加载的时候触发的事件.区别在于触发的时机不一样. 浏览器渲染页面DOM文档加载的步骤: 1.解析HTML结构. 2.加载外部脚本和css文件. ...

  2. js中DOMContentLoaded和load的区别

    如题:DOMContentLoaded和load都是页面加载的时候触发的事件.区别在于触发的时机不一样. 浏览器渲染页面DOM文档加载的步骤: 1.解析HTML结构. 2.加载外部脚本和css文件. ...

  3. 【转载】DOMContentLoaded与load的区别

    DOMContentLoaded与load的区别   (1)在chrome浏览器的开发过程中,我们会看到network面板中有这两个数值,分别对应网 络请求上的标志线,这两个时间数值分别代表什么? ( ...

  4. 事件DOMContentLoaded和load的区别

    1.当 onload 事件触发时,页面上所有的DOM,样式表,脚本,图片,flash都已经加载完成了. 2.当 DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片,f ...

  5. DOMContentLoaded与load的区别

    声明:此文章为转载(点击查看原文),如有侵权24小时内删除.联系QQ:1522025433. (1)在chrome浏览器的开发过程中,我们会看到network面板中有这两个数值,分别对应网 络请求上的 ...

  6. DOMContentLoaded 和 Load 事件 区别(待补充)

    javascript会阻塞dom的解析.当解析过程中遇到<script>标签的时候,便会停止解析过程,转而去处理脚本,如果脚本是内联的,浏览器会先去执行这段内联的脚本,如果是外链的,那么先 ...

  7. DOMContentLoaded和load的区别

    一.概念 DOMContentLoaded 当初始的 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表.图像和子框架的完成加载. load loa ...

  8. load/domContentLoaded事件、异步/延迟Js 与DOM解析

    一.DOMContentLoaded 与 load事件 关于load和DOMContentLoaded事件,mdn对于它们是这样描述的: DOMContentLoaded mdn文档地址:https: ...

  9. load和DOMContenLoaded的区别

    load和DOMContentLoaded的作用就是当页面加载完成的时候自动执行,但他们执行的时间点是不一样的. DOM文档加载步骤: (1)解析html结构 (2)加载外部脚本和样式表文件 (3)解 ...

随机推荐

  1. [转]为何需要调用“super viewDidLoad

    转载地址:http://liwpk.blog.163.com/blog/static/36326170201165104413314/   - (void)didReceiveMemoryWarnin ...

  2. js产生随机数并加入数组

    <!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  3. GMF:如何让网格显示在background,而不是foreground

    前言 很久没写文章了,准备写一系列关于Eclipse RCP /Plugin的文章. 这些文章都是trouble shooting性质的,不准备写的很细,当你碰到这样的问题,google到时,能帮你把 ...

  4. 通过Mac远程调试iPhone/iPad上的网页(转)

    我们知道在 Mac/PC 上的浏览器都有 Web 检查器这类的工具(如最著名的 Firebug)对前端开发进行调试,而在 iPhone/iPad 由于限于屏幕的大小和触摸屏的使用习惯,直接对网页调试非 ...

  5. 浅谈用ModelSim+Synplify+Quartus来实现Altera FPGA的仿真

    浅谈用ModelSim+Synplify+Quartus来实现Altera FPGA的仿真 工作内容: Mentor公司的ModelSim是业界最优秀的HDL语言仿真软件,它能提供友好的仿真环境,是业 ...

  6. 计算城市间的球面距离(C++实现)

    #include<iostream> #include<string> #include<cmath> #include<iomanip> using ...

  7. C语言位操作(转)

    http://www.cnblogs.com/cpoint/category/524132.html  

  8. BW常用事务码Tcode

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  9. DSO转换规则的Aggregation默认为覆盖MOV

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  10. Javascript学习笔记:6种实现继承的方式

    ①原型链式继承 function Person(name){ this.name=name; } Person.prototype.getName=function(){ return this.na ...