window.onload和DOMReady

Author : lovecicy

一直对window.onload事件和DOM Ready事件分不清楚,所以上网看看了。

首先弄明白一件事,window.onload事件是js原生支持的,只有在页面所有资源都加载完以后才会触发,当页面有大量的图片,加载事件很长,那么onload事件会过很久才会被触发。

而DOM Ready事件则是等待DOM文档结构准备完毕后出发,不用等待所有资源都加载完毕,就可触发。DOM Ready事件不是原生js事件,于是一些js的框架比如jQuery,MooTool,YUI等实现了此事件。

对于现代浏览器,DOMContentLoaded 事件在许多Webkit浏览器以及IE9上都可以使用, 此事件会在DOM文档准备好以后触发, 包含在HTML5标准中. 对于支持此事件的浏览器, 直接使用DOMContentLoaded事件就等于触发了DOM Ready事件。

对于IE6,7,8,微软在线文档指出:A few methods, such as doScroll, require the primary document to be completely loaded. If these methods are part of an initialization function, they should be handled when the ondocumentready event fires.

所以当调用doScroll方法而不抛出错误时,即可判断DOM结构已经建立好,等于说是DOM Ready事件已经被触发。

当然,如果使用的是jQuery等框架,最好还是使用框架提供的方法,除非你有信心做到所有浏览器都兼容。

同样,如果将脚本放在<body/>标签结束前,同样可以模拟DOM Ready事件。

http://www.feimos.com/window-onload-and-domready/

http://stackoverflow.com/questions/3698200/window-onload-vs-document-ready

http://www.cnblogs.com/zhangziqiu/archive/2011/06/27/DOMReady.html

http://javascript.nwbox.com/IEContentLoaded/

http://molily.de/weblog/domcontentloaded

standard

Have your say