load和DOMContenLoaded的区别

  load和DOMContentLoaded的作用就是当页面加载完成的时候自动执行，但他们执行的时间点是不一样的。

 

  DOM文档加载步骤：

   （1）解析html结构

   （2）加载外部脚本和样式表文件

   （3）解析并执行脚本代码

   （4）构造HTML DOM模型   //DOMContentLoaded执行点

   （5）加载图片等外部文件

   （6）页面加载完毕  //load

 

从上面这个流程，我们就能很清晰的看到load和DOMContentLoaded的不同，load是在第六步完成之后执行，而DOMContentLoaded是在第四步完成之后执行。很明显DOMContentLoaded的执行是在load之前的，下面是一个实例：

  window.addEventListener("load", function () {   //添加load事件
       console.log("load执行");
   }, false);

   window.addEventListener("DOMContentLoaded", function () {  //添加DOMContentLoaded事件
       console.log("domContentLoad执行");
   }, false)

结果：DOMContentLoaded先执行，而load后执行

 

 jQuery有3种针对文档加载的方法：

 

$(document).ready(function() {
    // ......
})

//document ready 简写
$(function() {
    // .....
})

$(document).load(function() {
    // ......
})

 

load是在第六步完成之后执行，而ready是在第四步完成之后执行

总结：DOMContentLoaded比load更符合用户体验，因为load还要等其他外部资源（图片之类的）加载完才能执行，而这些资源并不会影响到dom结构，所以我们大部分情况下都可以在dom加载第四步就执行我们的JavaScrip代码，也就是使用DOMContentLoaded。

 

ps： 低版本的ie可以使用onreadystatechange事件，当document.readyState == "complete"时执行对应的代码，这个事件不太可靠，比如当页面中存在图片的时候，可能反而在 onload 事件之后才能触发，换言之，它只能正确地执行于页面不包含二进制资源或非常少或者被缓存时作为一个备选吧。

document.attachEvent("onreadystatechange", doSomething)  //当页面加载状态改变的时候执行这个方法. 

function doSomething() 
{ 
if(document.readyState == "complete"){ //当页面加载状态为完全结束时进入 
//你要做的操作。 
} 
}