window onload和$(document).ready()及DOMContentLoaded的区别（DOM加载完毕前后调用）

这两个函数的差别就在于调用的时机不同，

一般情况一个页面响应加载的顺序是：域名解析-加载html-加载js和css-加载图片等其他信息。

在日常开发中我们经常需要获取页面的元素进行操作，而在编写代码的时候为了代码易读性我们会将js代码放在一起引入页面中，这就导致js引擎编译代码时可能会出现一些错误，如方法、变量未定义等，这是因为当操作页面DOM元素的js代码执行时，页面中相应的DOM元素还没有渲染，所以会出错。

所以一般的js文件，或者页面操作的js文件，都放在html之后引入。放在页面的最后面。

$(document).ready(function() {
    // DOM元素加载之后做的事情
})

此方法会在DOM元素全部加载完成之后，图片等其他信息加载之前调用，此时便可以肆无忌惮的调用页面DOM元素。

JQuery方法的默认参数是document，所以$(docuemnt).ready(function() { ... }) 就等价于 $().ready(function() { ... })，

简写：$(function() { // 操作元素的代码 })

$(function () {
    // 此方法为jQuery DOM加载完成触发的事件
})

原生js，DOM加载完成执行的事件为DOMContentLoaded，不过此方法只能通过 DOM2 级方式添加，即采用addEventListener()/attachEvent() 方式添加才能够使用。

document.addEventListener('DOMContentLoaded', function() {
     // 此方法为原生js DOM加载完成执行的事件
});

 jQuery 中经常使用的 $(document).ready(function() { // ...代码... }); 其实监听的就是 DOMContentLoaded 事件

 

window.onload方法会在页面及所有图片加载完毕触发，window.onload = function() {  }。

window.onload=function(){
      // 此方法会在DOM加载完成事件之后 执行
}

//或者可以具体到某一个具体的DOM元素
document.getElementById("imgID").onload=function(){
     //do something
}

此时可以访问页面中的所有元素，当js文件引入写在body上面的时候，页面自上向下执行，js中的代码操作页面元素的时候，页面还没有渲染完成，所以无法获取页面元素，而window.onload方法执行时页面所有的元素都已经渲染完毕，所以就不会出现问题。

 

还有一个方法会在DOM元素加载完成之前调用

(function () {
    // 此方法会在DOM加载完成之前调用
})(jQuery)