jQuery ready函數濫用分析

2019-11-20 23:56:26

字體：大中小

來源：轉載

供稿：網友

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

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

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

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

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

在文檔中插入一段腳本塊

復制代碼代碼如下:

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

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

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

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

復制代碼代碼如下:

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

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

上一篇：jquery的index方法實現tab效果

下一篇：獲取css樣式表內樣式的js函數currentStyle(IE),defaultView(FF)