快捷導(dǎo)航

jQuery ready函數(shù)濫用分析

更新時(shí)間：2011年02月16日 16:09:01 作者：

jQuery的ready函數(shù)為我們編寫(xiě)打開(kāi)頁(yè)面時(shí)運(yùn)行的腳本提供了方便，讓我們不必再關(guān)注什么window.onLoad之類(lèi)的事件，但是最近發(fā)現(xiàn)自己之前寫(xiě)的代碼有點(diǎn)濫用這個(gè)函數(shù)了。

查看下之前寫(xiě)的代碼，有許多這樣的代碼：

復(fù)制代碼代碼如下:

 
$(function(){ 
//do something. 
}); 

這里面可能寫(xiě)一些初始化樣式、給其他dom元素附加事件處理等。剛開(kāi)始沒(méi)發(fā)現(xiàn)什么問(wèn)題，但是在頁(yè)面引用了一些下載緩慢的圖片時(shí)，問(wèn)題出現(xiàn)了：在頁(yè)面html下載完，到所有資源全部下載完之間，綁定dom元素上綁定的事件無(wú)法執(zhí)行、用腳本綁定的樣式無(wú)效等混亂情況，也就是ready么有執(zhí)行。

Ok，我的情況比較特殊，可能這個(gè)情況對(duì)于大部分同學(xué)是不可能遇到的，但是在開(kāi)發(fā)中我們不得不考慮在某種比較糟糕的情況下，某個(gè)用戶(hù)打開(kāi)了你的網(wǎng)站，然后正好你的頁(yè)面上有許多圖片。。。那他只能等著了吧。。。

解決辦法：返璞歸真
在ready出現(xiàn)之前我們的寫(xiě)法可能是這樣的：

在文檔中插入一段腳本塊

復(fù)制代碼代碼如下:

 
<span id="test1">hello world</span> 
<script type="text/javascript"> 
alert(document.getElementById("test1").innerHTML); 
</script> 

這樣的代碼在瀏覽器加載到這里時(shí)就會(huì)執(zhí)行。注意，如果在這里的DOM元素test1在script塊后面，這里就會(huì)出現(xiàn)異常。

我只是需要在頁(yè)面加載時(shí)候就執(zhí)行這些代碼，不需要頁(yè)面所有資源都加載完，所以，沒(méi)必要讓我坐在這等著"緩慢"的ready吧。

嗯，思考一下，整理下html結(jié)構(gòu)
頁(yè)面中到處都是這個(gè)script塊也不好，不利于閱讀，那就把他們整理一塊拉到文檔結(jié)尾吧。

復(fù)制代碼代碼如下:

 
<html> 
<head> 
//讓這里就放一些title、meta、link之類(lèi)的神馬東西吧。 
</head> 
<body> 
Body html……. 
<script type="text/javascript"> 
alert("把你的代碼從head拉到這里來(lái)吧。。。放心的操作文檔，不用擔(dān)心找不到元素，也不用window.onLoad、$.ready神馬的了"); 
</body> 
</html> 

Ok，如果您確實(shí)需要等著資源文件下載完才能執(zhí)行腳本，那您還是老老實(shí)實(shí)的用jQuery的ready吧。

您可能感興趣的文章: