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的更多相关文章
- js DomContentLoaded 和 load 的区别
如题:DOMContentLoaded和load都是页面加载的时候触发的事件.区别在于触发的时机不一样. 浏览器渲染页面DOM文档加载的步骤: 1.解析HTML结构. 2.加载外部脚本和css文件. ...
- js中DOMContentLoaded和load的区别
如题:DOMContentLoaded和load都是页面加载的时候触发的事件.区别在于触发的时机不一样. 浏览器渲染页面DOM文档加载的步骤: 1.解析HTML结构. 2.加载外部脚本和css文件. ...
- 【转载】DOMContentLoaded与load的区别
DOMContentLoaded与load的区别 (1)在chrome浏览器的开发过程中,我们会看到network面板中有这两个数值,分别对应网 络请求上的标志线,这两个时间数值分别代表什么? ( ...
- 事件DOMContentLoaded和load的区别
1.当 onload 事件触发时,页面上所有的DOM,样式表,脚本,图片,flash都已经加载完成了. 2.当 DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片,f ...
- DOMContentLoaded与load的区别
声明:此文章为转载(点击查看原文),如有侵权24小时内删除.联系QQ:1522025433. (1)在chrome浏览器的开发过程中,我们会看到network面板中有这两个数值,分别对应网 络请求上的 ...
- DOMContentLoaded 和 Load 事件 区别(待补充)
javascript会阻塞dom的解析.当解析过程中遇到<script>标签的时候,便会停止解析过程,转而去处理脚本,如果脚本是内联的,浏览器会先去执行这段内联的脚本,如果是外链的,那么先 ...
- DOMContentLoaded和load的区别
一.概念 DOMContentLoaded 当初始的 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表.图像和子框架的完成加载. load loa ...
- load/domContentLoaded事件、异步/延迟Js 与DOM解析
一.DOMContentLoaded 与 load事件 关于load和DOMContentLoaded事件,mdn对于它们是这样描述的: DOMContentLoaded mdn文档地址:https: ...
- load和DOMContenLoaded的区别
load和DOMContentLoaded的作用就是当页面加载完成的时候自动执行,但他们执行的时间点是不一样的. DOM文档加载步骤: (1)解析html结构 (2)加载外部脚本和样式表文件 (3)解 ...
随机推荐
- [转]为何需要调用“super viewDidLoad
转载地址:http://liwpk.blog.163.com/blog/static/36326170201165104413314/ - (void)didReceiveMemoryWarnin ...
- js产生随机数并加入数组
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
- GMF:如何让网格显示在background,而不是foreground
前言 很久没写文章了,准备写一系列关于Eclipse RCP /Plugin的文章. 这些文章都是trouble shooting性质的,不准备写的很细,当你碰到这样的问题,google到时,能帮你把 ...
- 通过Mac远程调试iPhone/iPad上的网页(转)
我们知道在 Mac/PC 上的浏览器都有 Web 检查器这类的工具(如最著名的 Firebug)对前端开发进行调试,而在 iPhone/iPad 由于限于屏幕的大小和触摸屏的使用习惯,直接对网页调试非 ...
- 浅谈用ModelSim+Synplify+Quartus来实现Altera FPGA的仿真
浅谈用ModelSim+Synplify+Quartus来实现Altera FPGA的仿真 工作内容: Mentor公司的ModelSim是业界最优秀的HDL语言仿真软件,它能提供友好的仿真环境,是业 ...
- 计算城市间的球面距离(C++实现)
#include<iostream> #include<string> #include<cmath> #include<iomanip> using ...
- C语言位操作(转)
http://www.cnblogs.com/cpoint/category/524132.html
- BW常用事务码Tcode
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- DSO转换规则的Aggregation默认为覆盖MOV
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- Javascript学习笔记:6种实现继承的方式
①原型链式继承 function Person(name){ this.name=name; } Person.prototype.getName=function(){ return this.na ...