window.load和$(document).ready()事件

1.加载多个函数的问题

     在onload事件中只能这样加载，很丑陋…而在JQuery中你可以利用多个JQuery.ready()方法，它们会按次序依次执行

2.代码和内容不分离

3.执行先后顺序不同

     对于body.onload事件，是在加载完所有页面内容才会触发,所有内容包括图片，flash等.如果页面的这些内容很多会让用户等待很长时间.

    而对于$(document).ready()方法，这个方法只是在页面所有的DOM加载完毕后就会触发,无疑很大的加快了网页的速度.

但是对于一些特殊应用，比如图片的放大缩小，图片的剪裁。需要网页所有的内容加载完毕后才执行的呢？推荐使用$(window).load()方法，这个方法会等到页面所有内容加载完毕后才会触发，并且同时又没有onload事件的弊端.

翻翻jQuery的源码看看$(document).ready()是如何实现的吧：

代码如下：

if ( jQuery.browser.msie && window == top ) (function(){ 
if (jQuery.isReady) return; 
try { 
document.documentElement.doScroll("left"); 
} catch( error ) { 
　　　　　　setTimeout( arguments.callee, 0 ); 
　　　　　　 return; 
　　　　} 
// and execute any waiting functions 
jQuery.ready(); 
})(); 
jQuery.event.add( window, "load", jQuery.ready );

事件DOMContentLoaded与Load的区别

先看这两句代码：

window.addEventListener(‘load’, loaded, false);
document.addEventListener(‘DOMContentLoaded’, loaded, false);

总结：

load事件是在页面所有元素都加载完后触发；

DOMContentLoaded，它是指dom tree加载完就触发。这个事件要小心使用，当然它是个强大的事件，起码用上它在某一层面上防止了页面加载被堵塞

DOMContentLoaded

developer.mozilla.org上的文章说：

当页面中的文档树解析完成时,在页面的Document对象上,会触发DOMContentLoaded事件.该事件代表了,页面的DOM树已经构建完成,但页面引用的样式表和图像文件,以及包含的框架页面可能还没有加载完成,在页面完全加载完成时,会触发另外一个类似的称为"load"的事件.

<dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">接口 :</dfn>Event
<dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">是否为同步模式:</dfn>是
<dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">是否冒泡 :</dfn> 是
<dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">触发源:</dfn> Document
<dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">能否阻止默认动作 :</dfn> 否
<dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">是否存在默认动作 :</dfn>否

注意: 样式表文件的加载会阻塞脚本执行, 所以,如果你有一个<script>标签放在一个<link rel="stylesheet" ...>标签之后, 则直到该样式表文件加毕完之前,DOMContentLoaded事件都不会触发.

转载于:https://my.oschina.net/xiaomu1994/blog/744919