document.ready和window.onload的區(qū)別

B0B0 發(fā)布于2019-08-23 14:14 / 2290人閱讀

摘要：和的區(qū)別文檔加載完成事件頁(yè)面加載完成有兩種事件一是，表示文檔結(jié)構(gòu)已經(jīng)加載完成不包含圖片等非文字媒體文件二是，指示頁(yè)面包含圖片等文件在內(nèi)的所有元素都加載完成。即當(dāng)所有鏈接被鼠標(biāo)單擊的時(shí)候，都執(zhí)行也就是說(shuō)頁(yè)面加載時(shí)綁定，真正該觸發(fā)時(shí)觸發(fā)。

document.ready和onload的區(qū)別——JavaScript文檔加載完成事件
頁(yè)面加載完成有兩種事件：

一是ready，表示文檔結(jié)構(gòu)已經(jīng)加載完成（不包含圖片等非文字媒體文件）；

二是onload，指示頁(yè)面包含圖片等文件在內(nèi)的所有元素都加載完成。

1、Dom Ready

使用jq時(shí)一般都是這么開(kāi)始寫(xiě)腳本的：

$(function(){

  // do something

});
例如：

$(function() {

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

})
這個(gè)例子就是給所有的a標(biāo)簽綁定了一個(gè)click事件。即當(dāng)所有鏈接被鼠標(biāo)單擊的時(shí)候，都執(zhí)行 alert("Hello World!");
也就是說(shuō)頁(yè)面加載時(shí)綁定，真正該觸發(fā)時(shí)觸發(fā)。
其實(shí)這個(gè)就是jq ready()的簡(jiǎn)寫(xiě)，它等價(jià)于：

復(fù)制代碼
$(document).ready(function(){

 //do something

})
//或者下面這個(gè)方法，jQuer的默認(rèn)參數(shù)是：“document”；
$().ready(function(){

//do something

})
復(fù)制代碼
這個(gè)就是jq ready()的方法就是Dom Ready，他的作用或者意義就是:在DOM加載完成后就可以可以對(duì)DOM進(jìn)行操作。
一般情況一個(gè)頁(yè)面響應(yīng)加載的順序是，域名解析-加載html-加載js和css-加載圖片等其他信息。
那么Dom Ready應(yīng)該在“加載js和css”和“加載圖片等其他信息”之間，就可以操作Dom了。

2、Dom Load

用原生的js的時(shí)候我們通常用onload時(shí)間來(lái)做一些事情，比如：

復(fù)制代碼
window.onload=function(){

  //do something

}
//或者經(jīng)常用到的圖片
document.getElementById("imgID").onload=function(){

 //do something

}
復(fù)制代碼
這種就是Dom Load，他的作用或者意義就是：在document文檔加載完成后就可以對(duì)DOM進(jìn)行操作，document文檔包括了加載圖片等其他信息。
那么Dom Load就是在頁(yè)面響應(yīng)加載的順序中的“加載圖片等其他信息”之后，就可以操作Dom了。

最后附上一段在所有DOM元素加載之前執(zhí)行的jQuery代碼。