一、何时触发这两个事件?

1、当 onload 事件触发时,页面上所有的DOM,样式表,脚本,图片,flash都已经加载完成了。

2、当 DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片,flash。

二、为什么要区分?

开发中我们经常需要给一些元素的事件绑定处理函数。但问题是,如果那个元素还没有加载到页面上,但是绑定事件已经执行完了,是没有效果的。这两个事件大致就是用来避免这样一种情况,将绑定的函数放在这两个事件的回调中,保证能在页面的某些元素加载完毕之后再绑定事件的函数。

当然DOMContentLoaded机制更加合理,因为我们可以容忍图片,flash延迟加载,却不可以容忍看见内容后页面不可交互。

这里又要牵扯到页面加载渲染的原理了:

1、加载样式表会阻塞外链脚本的执行

  一些Gecko和Webkit引擎版本的浏览器,包括IE8在内,会同时发起多个Http请求来并行下在样式表和脚本。但脚本不会被执行,直到样式被加载完成。在未加载完之前甚至页面也不会被渲染。但是在opera中样式的加载不会阻塞脚本的执行。

  因此:目前通用的作法是把脚本和样式都以外链形式引入,甚至在jquery的官方文档中也是这样推荐的。对于大部分脚本来说,这样的脚本等待外链的机制还是有意义的,比如一些DOM和样式操作需要读取元素的位置,颜色等。这就需要样式先于脚本加载

检验方法:尝试强制使服务器端使style延迟一段时间才加载(甚至10秒),测试的结果是,在某些版本的Firefox,Chrome中最后一段脚本仍然是可以读出style的属性值(因为style始终先于javascript加载),比如#FF0000或者rgb(255, 0, 0),而这验证了我上面的说法。而在opera中却无法读出style的属性。代码如下:

html 文件内容
<!DOCTYPE html>
<head>
<linkrel="stylesheet"href="stylesheet.css">
<scriptsrc="script.js"></script>
</head>
<body>
<divid="element">The element</div><
/body>
</html> stylesheet.css 文件内容
#element { color: red; } script.js文件内容
document.addEventListener('DOMContentLoaded',function(){
alert(getComputedStyle(document.getElementById('element'),null).color);},
false);

2、各大javascript框架如何实现domReady事件的

早期版本的浏览器是没有DOMContentLoaded事件的那么它们怎么模拟实现类似功能呢?先来说说原理

(1)、如果是webkit引擎则轮询document的readyState属性,当值为loaded或者complete时则触发DOMContentLoaded事件,对webkit525之后版本直接可以注册DOMContentLoaded事件

if(Browser.Engine.webkit){
timer = window.setInterval(function(){
  if(/loaded|complete/.test(document.readyState))
fireContentLoadedEvent();
  },0);
}

(2)、IE处理方式有多种

a、在页面临时插入一个script元素,并设置defer属性,最后把该脚本加载完成视作DOMContentLoaded事件来触发。这样做有一个问题是,如果插入脚本的页面包含iframe的话,会等到iframe加载完才触发,其实这与onload是无异的。即这个方法不准确。

b、通过setTiemout来不断的调用documentElement的doScroll方法,直到调用成功则出触发DOMContentLoaded。这样做的原理是在IE下,DOM的某些方法只有在DOM解析完成后才可以调用,doScroll就是这样一个方法,反过来当能调用doScroll的时候即是DOM解析完成之时,与prototype中的document.write相比,该方案可以解决页面有iframe时失效的问题

c、首先注册document的onreadystatechange事件,但经测试后该方法与window.onload相当,效果不大。下面是jquery做的兼容性处理代码。

document.attachEvent("onreadystatechange",
  function(){
    if( document.readyState ==="complete"){
   document.detachEvent("onreadystatechange", arguments.callee );
jQuery.ready();}
});

接下来具体看一看几大前端框架是如何综合运用这几个方法的。

jQuery.ready.promise = function( obj ) {//定义一个状态机
if ( !readyList ) {//保证页面只创建一个延迟对象,多次使用$.ready() 则直接使用延迟对象done方法加入回调队列 readyList = jQuery.Deferred();//异步延迟对象
       // readyRE = /complete|loaded|interactive/,
// Catch cases where $(document).ready() is called after the browser event has already occurred.
// we once tried to use readyState "interactive" here, but it caused issues like the one
// discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15
if ( document.readyState === "complete" ) {//

          这个属性是只读的,传回值有以下的可能:

          //0-UNINITIALIZED:XML 对象被产生,但没有任何文件被加载。 
          //1-LOADING:加载程序进行中,但文件尚未开始解析。 
          //2-LOADED:部分的文件已经加载且进行解析,但对象模型尚未生效。 
          //3-INTERACTIVE:仅对已加载的部分文件有效,在此情况下,对象模型是有效但只读的。 
          //4-COMPLETED:文件已完全加载,代表加载成功

// Handle it asynchronously to allow scripts the opportunity to delay ready
setTimeout( jQuery.ready ); // Standards-based browsers support DOMContentLoaded
} else if ( document.addEventListener ) {//符合W3C标准的浏览器
// Use the handy event callback
document.addEventListener( "DOMContentLoaded", completed, false ); // A fallback to window.onload, that will always work
window.addEventListener( "load", completed, false );//还是给load事件注册了事件,以防不测,做为回滚用 // If IE event model is used
} else {
// Ensure firing before onload, maybe late but safe also for iframes
document.attachEvent( "onreadystatechange", completed ); // A fallback to window.onload, that will always work
window.attachEvent( "onload", completed ); // If IE and not a frame
// continually check to see if the document is ready
var top = false; try {//判断是否为iframe,如果不是的话采用不断的轮询scorll的方法
top = window.frameElement == null && document.documentElement;
} catch(e) {} if ( top && top.doScroll ) {
(function doScrollCheck() {
if ( !jQuery.isReady ) { try {
// Use the trick by Diego Perini
// http://javascript.nwbox.com/IEContentLoaded/
top.doScroll("left");
} catch(e) {
return setTimeout( doScrollCheck, 50 );
} // detach all dom ready events
detach(); // and execute any waiting functions
jQuery.ready();//实际:readyList.resolveWith( document, [ jQuery ] );
                    }
})();
}
}
}
return readyList.promise( obj );
};

再贴上几段其他框架的代码,大同小异,就不具体分析了

prototype

(function(GLOBAL) {
/* Support for the DOMContentLoaded event is based on work by Dan Webb,
Matthias Miller, Dean Edwards, John Resig, and Diego Perini. */ var TIMER; function fireContentLoadedEvent() {
if (document.loaded) return;
if (TIMER) window.clearTimeout(TIMER);
document.loaded = true;
document.fire('dom:loaded');
} function checkReadyState() {
if (document.readyState === 'complete') {
document.detachEvent('onreadystatechange', checkReadyState);
fireContentLoadedEvent();
}
} function pollDoScroll() {
try {
document.documentElement.doScroll('left');
} catch (e) {
TIMER = pollDoScroll.defer();
return;
} fireContentLoadedEvent();
} if (document.readyState === 'complete') {
// We must have been loaded asynchronously, because the DOMContentLoaded
// event has already fired. We can just fire `dom:loaded` and be done
// with it.
fireContentLoadedEvent();
return;
} if (document.addEventListener) {
// All browsers that support DOM L2 Events support DOMContentLoaded,
// including IE 9.
document.addEventListener('DOMContentLoaded', fireContentLoadedEvent, false);
} else {
document.attachEvent('onreadystatechange', checkReadyState);
if (window == top) TIMER = pollDoScroll.defer();
} // Worst-case fallback.
Event.observe(window, 'load', fireContentLoadedEvent);
})(this);

mootools

(function(GLOBAL) {
/* Support for the DOMContentLoaded event is based on work by Dan Webb,
Matthias Miller, Dean Edwards, John Resig, and Diego Perini. */ var TIMER; function fireContentLoadedEvent() {
if (document.loaded) return;
if (TIMER) window.clearTimeout(TIMER);
document.loaded = true;
document.fire('dom:loaded');
} function checkReadyState() {
if (document.readyState === 'complete') {
document.detachEvent('onreadystatechange', checkReadyState);
fireContentLoadedEvent();
}
} function pollDoScroll() {
try {
document.documentElement.doScroll('left');
} catch (e) {
TIMER = pollDoScroll.defer();
return;
} fireContentLoadedEvent();
} if (document.readyState === 'complete') {
// We must have been loaded asynchronously, because the DOMContentLoaded
// event has already fired. We can just fire `dom:loaded` and be done
// with it.
fireContentLoadedEvent();
return;
} if (document.addEventListener) {
// All browsers that support DOM L2 Events support DOMContentLoaded,
// including IE 9.
document.addEventListener('DOMContentLoaded', fireContentLoadedEvent, false);
} else {
document.attachEvent('onreadystatechange', checkReadyState);
if (window == top) TIMER = pollDoScroll.defer();
} // Worst-case fallback.
Event.observe(window, 'load', fireContentLoadedEvent);
})(this);

纸上学来终觉浅,绝知此事要躬行。自己写一段。

(function(window,undefined){
hobo = {}
var readyList = [],
_isReady =false; function readyFn(){
console.log(event.type)
if ( document.addEventListener || event.type === "load" || document.readyState === "complete" ) {
detach(); _isReady =true; fireReady();
        

}
}
    
  function fireReady(){
      for (var i = 0,fn; fn = readyList[i++];) {
fn();
};
      readyList = null;
      fireReady = function(){}//惰性函数,防止IE9二次调用
  }

    function detach() {
if ( document.addEventListener ) { document.removeEventListener( "DOMContentLoaded", readyFn, false );
window.removeEventListener( "load", readyFn, false ); } else {
document.detachEvent( "onreadystatechange", readyFn );
window.detachEvent( "onload", readyFn );
}
} hobo.ready = function(fn){
if(readyList){
readyList.push(fn)
} if(readyList.length>1){
return;
} if(document.readyState === 'complete'){
setTimeout(readyFn);
}else if (document.addEventListener) {//符合W3C 则监听 DOMContentLoaded和load事件
console.log('addEventListener')
document.addEventListener('DOMContentLoaded',readyFn,false);
document.addEventListener('DOMContentLoaded',readyFn,false);
}else{//针对IE
console.log('attachEvent')
document.attachEvent('onreadystatechange',readyFn); document.attachEvent('onload',readyFn);
} //针对IE并且非frame
var top = false;
try{
top = window.frameElement===null&&document.documentElement
}catch(e){} if(top&&top.doScroll){
(function doScrollCheck(){
if (!_isReady) {
try {//每隔50秒轮询 检测是否支持doScroll()方法
top.doScroll("left");
} catch(e) {
return setTimeout( doScrollCheck, 50 );
}
};
})
} }
window.hobo =hobo
}(window,void 0)) //使用 hobo.ready(function(){
console.log(11111);
})
hobo.ready(function(){
console.log(22222);
})

window.onload和DOMContentLoaded的区别的更多相关文章

  1. 15. window.onload和$(function() { } )的区别

    window.onload和$(function() { } )的区别 1)执行时机不一样 $(function() { } )是在dom结构创建完成以后就执行,window.onload是在整个页面 ...

  2. window.onload、DOMContentLoaded和$(document).ready()

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  3. Window.onLoad 和 DOMContentLoaded事件的先后顺序

    相信写js的,都知道window.onload吧,但是并不是每个人都知道DOMContentLoaded,其实即使你不知道,很有可能你也经常使用了这个东西. 一般情况下,DOMContentLoade ...

  4. window.onload()与$(document).ready()区别

    浏览器加载完DOM后,会通过javascript为DOM元素添加事件,在javascript中,通常使用window.onload()方法. 在jquery中,则使用$(document).ready ...

  5. window.onload与$(document).ready()区别

    2013-12-08 17:11:34 window.onload一次只能执行一个程序,而$(document).ready()可以按照先后顺序执行多个程序. eg: function one(){ ...

  6. window.onload()和$(function(){});的区别

    1.window.onload必须等到页面中所有元素加载完之后才会执行(包括图片.视频等)而$(function(){});是在结构绘制完毕之后执行,二者的执行时机是不同的,一般来说后者会首先执行 2 ...

  7. window.onload()和$(document).ready()区别

    执行时间:window.onload:必须等待网页中所有的内容加载完毕后(包括图片)才能执行;$(document).ready();网页中所有DOM结构绘制完毕后就执行,可能DOM元素关联的东西并没 ...

  8. window.onload 和 DOMContentLoaded区别及如何判断dom是否加载完毕

    http://blog.allenm.me/2010/02/window-onload-和-domcontentloaded/ 其中使用IE不支持DOMContentLoaded,那么判断IE是否加载 ...

  9. jquery中的$(document).ready()、JavaScript中的window.onload()以及body中的onload()、DomContentLoaded()区别

    $().ready().$(handler).$(document).ready(handler)均不是原生JS中的,都是jQuery中封装的方法.这些事件在当页面的dom节点加载完毕后就执行,无需等 ...

随机推荐

  1. vue 随笔3

    在整个vue项目中index.js只能有一个 ,创建vue组件实例的代码只能写在main.js中或者index.js中,别的文件中都是使用export default 常量 或者是方法

  2. 如何用JavaScript实现获取验证码的效果

    转自:http://www.php.cn/js-tutorial-411734.html HTML部分: 1 2 3 4 5 6 7 <body onload='createCode()'> ...

  3. Python 赋值、浅拷贝和深拷贝

    初学Python,和C++还是有许多不同.直接赋值.浅拷贝和深拷贝,这三种拷贝对象的操作之间还是有许多的区别.Python语言的版本为2.7,在Pycharm中进行实验. 一.直接赋值 用下面的代码来 ...

  4. Table View Programming Guide for iOS---(四)---Navigating a Data Hierarchy with Table Views

    Navigating a Data Hierarchy with Table Views 导航数据表视图层次 A common use of table views—and one to which ...

  5. c# 异常找不到源代码的情况

    简单说下原因,调用的是dynamic参与的函数 dynamic dataqueue = pi.GetValue(this,null); var eo = ErrorObject.True; var v ...

  6. bzoj 2626: JZPFAR【KD-tree】

    和3053差不多,把pair first做成负数就可以用大根堆维护了 注意:要开long long:比较的时候因为编号也占权重所以要比较pair:编号不是mid!不是mid!是初始输入的那个编号!搞混 ...

  7. Codeforces732F Tourist Reform

    求出无向图的所有边双联通分量,然后缩点就成了一颗树. 然后我们选取最大的那个边双联通分量作为根,这样我们就可以确定所有割边的方向了. 对于边双联通分量里面的边,我们随便dfs一下就可以把它变成强连通分 ...

  8. P5168 xtq玩魔塔

    传送门 其实就是板子--只要会克鲁斯卡尔重构树和带修莫队就可以了 这么想着的我就调了将近一个下午-- 思路其实比较清晰,然而码量很大,细节贼多-- 不难看出只在最小生成树上走最优,于是建出克鲁斯卡尔重 ...

  9. 深入解读docker网络与kubernetes网络

    前言:你是否学习使用k8s很久很久了可是对于网络这块仍旧似懂非懂呢? 您是否对网上一堆帖子有如下的抱怨: 打开多个博客,然后发现有区别么? 明显是直译过来的,越看越迷糊 “因为xxx,所以yyy”,. ...

  10. stylus基础教程,stylus实例教程,stylus语法总结

    stylus特点富于表现力.具有健壮性.功能丰富.动态编码不需要写CSS的冒号.分号.大括号和LESS.SASS功能类似,会这些的入手很快stylus特点安装使用stylus语法(一)选择器(二)变量 ...