JQ中的$(document).ready()大家應(yīng)該用的非常多，基本每個(gè)JS腳本中都有這個(gè)函數(shù)的出現(xiàn)有時(shí)甚至?xí)霈F(xiàn)多個(gè)，那么另一個(gè)加載函數(shù)$(window).load相對(duì)出現(xiàn)的次數(shù)就很少了，下面為大家介紹一下兩者的區(qū)別與他們的執(zhí)行順序

一般情況下一個(gè)頁(yè)面響應(yīng)加載的基本順序是：域名解析 -> 加載html -> 加載js和css -> 加載圖片等其他信息。
那么我們?cè)诰帉?xiě)JS腳本時(shí)什么情況下使用$(document).ready()又在什么情況下使用$(window).load呢，我們先來(lái)了解一下兩者的功能

一、$(document).ready()

從字面的意思上理解，就是文檔準(zhǔn)備好了。也就是瀏覽器已經(jīng)加載并解析完整個(gè)html文檔，dom樹(shù)已經(jīng)建立起來(lái)了,然后執(zhí)行此函數(shù)

原生JavaScript中的寫(xiě)法如下：

document.ready=function(){
 alert("ready"); 
}

jQuery中的寫(xiě)法如下：

$(document).ready(function(){
 alert("ready");
});

或

$(function(){
 alert("ready");
});

二、$(window).load

在網(wǎng)頁(yè)中所有元素(包括頁(yè)面中圖片,css文件等所有關(guān)聯(lián)文件)完全加載到瀏覽器后才執(zhí)行

原生JavaScript中的寫(xiě)法如下：

window.onload = function(){ 
 alert("onload"); 
};

jQuery中的寫(xiě)法如下：

$(window).load(function(){
 alert("onload");
});

兩者的區(qū)別在于：

1.執(zhí)行時(shí)間不同

$(document).ready()是在頁(yè)面完成HTML的加載并建立了DOM樹(shù)之后就開(kāi)始執(zhí)行，但這并不代表頁(yè)面的所

有數(shù)據(jù)已經(jīng)全部加載完成，一些大的圖片有會(huì)在建立DOM樹(shù)之后很長(zhǎng)一段時(shí)間才行加載完成，而

$(window).load()就是整個(gè)頁(yè)面已經(jīng)加載完畢后才執(zhí)行，包括圖片等一些關(guān)聯(lián)文件。

2.可以被執(zhí)行的次數(shù)不同

$(document).ready()可以在JavaScript代碼中出現(xiàn)多次，并且里面的函數(shù)或者代碼都可以執(zhí)行；而$(window).load()只能在JavaScript代碼中出現(xiàn)一次，如果有多個(gè)$(window).load()，那么只有最后一個(gè)$(window).load()里面的函數(shù)或者代碼才會(huì)執(zhí)行，之前的$(window).load()都將被覆蓋;

3.執(zhí)行的效率不同

如要在dom的元素節(jié)點(diǎn)中添加onclick屬性節(jié)點(diǎn)，這時(shí)用$(document).ready()就要比用$(window).load()的效率高；但是在某些時(shí)候還必須得用$(window).load()才行

總結(jié)一下就是：$(window).load()在$(document).ready之后執(zhí)行，且頁(yè)面中所有內(nèi)容全部加載完成后才會(huì)執(zhí)行，兩者的使用時(shí)機(jī)一目了然，大家可以自行決定。

最新評(píng)論