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

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

一、$(document).ready()

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

原生JavaScript中的寫法如下：

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

jQuery中的寫法如下：

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

或

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

二、$(window).load

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

原生JavaScript中的寫法如下：

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

jQuery中的寫法如下：

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

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

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

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

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

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

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

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

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

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

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

最新評論