快捷導(dǎo)航

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

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

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

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

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

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

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

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

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

在文檔中插入一段腳本塊

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

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

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

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

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

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

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

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

您可能感興趣的文章: