JS 页面加载触发事件的区别

document.ready和onload的区别——JavaScript文档加载完成事件
页面加载完成有两种事件：

一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件）；

二是onload，指示页面包含图片等文件在内的全部元素都加载完成。

 

一、Dom Ready

用jQ的人不少人都是这么开始写脚本的： 
$(function(){ 
      // do something 
});

例如：

$(function() {
     $("a").click(function() {
           alert("Hello world!");
      });

})

这个例子就是给全部的a标签     绑定了一个click事件。即当全部连接被鼠标单击的时候，都执行 alert("Hello World!");
(本身的理解)也就是说页面加载时绑定，真正该触发时触发。
其实这个就是jq ready()的简写，他等价于： 
$(document).ready(function(){
     //do something
})
或者下面这个方法，jQuer的默认参数是：“document”；
$().ready(function(){
    //do something
})
这个就是jq ready()的方法就是Dom Ready，他的做用或者意义就是:在DOM加载完成后就能够能够对DOM进行操做。
通常状况一个页面响应加载的顺序是，域名解析-加载html-加载js和css-加载图片等其余信息。
那么Dom Ready应该在“加载js和css”和“加载图片等其余信息”之间，就能够操做Dom了。

 

二、Dom Load
用原生的js的时候咱们一般用onload时间来作一些事情，好比： 
window.onload=function(){
      //do something
}
或者常常用到的图片，假设这个
document.getElementById("imgID").onload=function(){
     //do something
}
这种就是Dom Load，他的做用或者意义就是:在document文档加载完成后就能够能够对DOM进行操做，document文档包括了加载图片等其余信息。
那么Dom Load就是在页面响应加载的顺序中的“加载图片等其余信息”以后，就能够操做Dom了。

 

3.用个最经常使用的例子说明Dom Ready和Dom Load二者的区别
Dom Ready是在dom加载完成后就能够直接对dom进行操做，好比一张图片只要<img>标签完成，不用等这个图片加载完成，就能够设置图片的宽高的属性或样式等；
Dom Load是在整个document文档（包括了加载图片等其余信息）加载完成后就能够直接对dom进行操做，好比一张图片要等这个图标加载完成以后才能设置图片的宽高的属性或样式等；
好比一个图片浏览的效果，一般若是图片尺寸很大的状况下，为了防止图片把页面撑开一般会限定图片的宽度或高度，若是是单张图片或者是多张规格比例统一的图片下咱们能够直接在<img>上加个宽度或者高度的属性<img src=“img.jpg” alt=”码头的大照片” width=“100” height=“90”>，或者能够在css样式中加宽度或者高度的属性（推荐）。可是若是这些张规格比例不统一的图片要浏览呢？那就有问题，你设置宽高极可能形成图片严重失真。在ie6以后ie7，ie8还有其余主流浏览器支持css2.1中min-width，max-width，min-height，max-width，这样咱们就能够用min-width，max-width，min-height，max-width解决这些问题，可是ie6除非是抛弃性能问题用css表达式

 

 

（固然old9(http://old9.blogsome.com/2008/10/26/css-expression-reloaded/)和怿飞(http://www.planabc.net/2009/09/21/optimization_of_css_eexpression/)有关于css表达式性能问题的解决方案,你们能够看一下）。这个时候ie的最好解决方案就是用Dom Ready而不是Dom Load，由于一般大图片加载的时候会一点一点的加载，这个在尺寸大，字节多，网速慢的时候表现的很是明显，用Dom Load，一般是先把页面撑开，加载完成后再把图片重设宽高，图片加载多少时间，这个页面就会撑开多久，用户会很是难受！！