最开始对window.onload模糊的理解就是,文档全部加载完之后,再执行某个事件或者函数。对整个执行过程的理解也不是很到位。现在来做个梳理。
1. 文档加载过程
1. 解析HTML
2. 加载外部css文件和js文件
3. 执行文档内的js代码
4. HTML DOM 全部加载完(不包括外部图片、视频之类的文件)
5. 加载图片与外部链接文件
6. 页面全部加载完
页面加载过程大致分为以上几个过程,如果把js文件放在底部,加载顺序稍有变动。这个不影响。
一般情况下,我们都是等待页面加载完之后,才会进行一些DOM的操作
2. onload
window.addEventListener('load',function({
var main = document.getElementById('main');
main.style.background = "blue"
})
这种加载比较简单粗暴,容易理解,但是也是最慢的。上面提到过,文档加载大致分为六步,如果用这个方法,必须得等这六步全部执行完,才会执行load中的函数。
3. DOMContentLoaded
window.addEventListener('DOMContentLoaded',function({
var main = document.getElementById('main');
main.style.background = "blue"
})
如果我们使用DOMContentLoaded,就比load稍快些,因为它只需要执行文档加载到第三步,该事件就可以执行了。
IE8 并不支持该事件。没关系,有个兼容的写法,IE8提供了onreadystateschange事件。顾名思义,当文旦加载的内容发生变化时,HTML document有调用该方法。当然,不仅仅是HTML document可以调用该方法,applet,embed,frame,frameset,iframe,img,input,image,link,script,xml都可以调用该方法,因为这些标签可以加载数据,它们数据会随着加载的进程还改变。
if(document.addEventListener){
document.addEventListener('DOMContentLoaded', function(){
document.removeEventListner('DOMContenLoded',arguments.callee);
})else if(document.attachEvent){
document.attachEvent('onreadystatechange', function(){
document.detachEvent('onreadystatechange', arguments.callee,);
}
4.jQueryz中的ready
那我们经常用的jQuery中$(document).ready()是哪种执行方式呢。
看看源码就知道了。
jQuery.ready.promise = function( obj ) {
if ( !readyList ) {
readyList = jQuery.Deferred();
// Catch cases where $(document).ready() is called
// after the browser event has already occurred.
// Support: IE9-10 only
// Older IE sometimes signals "interactive" too soon
if ( document.readyState === "complete" ||
( document.readyState !== "loading" && !document.documentElement.doScroll ) ) {
// Handle it asynchronously to allow scripts the opportunity to delay ready
window.setTimeout( jQuery.ready );
} else {
// Use the handy event callback
document.addEventListener( "DOMContentLoaded", completed );
// A fallback to window.onload, that will always work
window.addEventListener( "load", completed );
}
}
return readyList.promise( obj );
};
看代码,就知道如果使用了$(document).ready()的话,是执行到第三步就开始执行js代码了。这里用到了readyState ,是为了兼容IE。
参考:
https://developer.mozilla.org/en/docs/web/api/document/readystate
http://stackoverflow.com/questions/3520780/when-is-window-onload-fired
http://help.dottoro.com/ljerfwdm.php