/*
* 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. xcode 创建项目 勾选 git 出现警告

    1. 解决方法: 在mac机上找到终端工具  >> 这里先介绍下使用Command-line. 1,下载Git installer,地址:http://git-scm.com/downlo ...

  2. Hadoop集群环境搭建

    ----------------------------------------------------------- 自学记录,交流学习请发送邮件至gxz1984@gmail.com ------- ...

  3. R----Shiny包介绍学习

    为什么用Shiny Shiny让数据分析师写完分析与可视化代码后,稍微再花几十分钟,就可以把分析代码工程化,将分析成果快速转化为交互式网页分享给别人.所以,如果你是一名使用R的数据分析师,选择Shin ...

  4. Hibernate的关联映射——双向1-N关联

    Hibernate的关联映射--双向1-N关联 对于1-N的关联,Hibernate推荐使用双向关联,而且不要让1的一端控制关联关系,而是用N的一端控制关联关系.双线的1-N关联和N-1关联是两种相同 ...

  5. XML学习笔记(三) -- Schema

    标签(空格分隔): 学习笔记 Schema的格式 XML Schema文档是由元素.属性.命名空间和XML文档中的其他节点构成的. XML Schema有两种重要的Schema模型:Microsoft ...

  6. python model对象转为dict数据

    在接口通讯里经常遇到这种需求,需要将对象的字段名和值均传至接口,user = User.objects.get(id=1)笨方法1,没错,我这样写过:di = {}di['username'] = u ...

  7. UITableViewCell的cell重用原理

    iOS设备的内存有限,如果用UITableView显示成千上万条数据, 就需要成千上万个UITableViewCell对象的话, 那将会耗尽iOS设备的内存.要解决该问题,需要重用UITableVie ...

  8. SQL&&LINQ:左(外)连接,右(外)连接,内连接,完全连接,交叉连接,多对多连接

    SQL: 外连接和内连接: 左连接或左外连接:包含左边的表的所有行,如果右边表中的某行没有匹配,该行内容为空(NULL) --outer jion:left join or left outer jo ...

  9. javascript 分页组件

    自己写的一个简单的分页组件,主要功能还有实现都在JS中,html页面中只用增加一个放置生成分页的DIV,并给定容器的id. html结构如下: <ul class="paginatio ...

  10. hiho_1141

    题目 按顺序给出N个数字,求出所有的逆序对个数(逆序对指数字 Ai > Aj且 i < j) 题目链接:hiho_1141     数据规模为 100000,必须使用O(nlogn)的算法 ...