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

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

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

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

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

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

這里面可能寫一些初始化樣式、給其他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è)用戶打開(kāi)了你的網(wǎng)站，然后正好你的頁(yè)面上有許多圖片。。。那他只能等著了吧。。。

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

在文檔中插入一段腳本塊

復(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之類的神馬東西吧。 
</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吧。

您可能感興趣的文章:

jQuery
ready

相關(guān)文章

jquery 動(dòng)態(tài)創(chuàng)建元素的方式介紹及應(yīng)用
動(dòng)態(tài)創(chuàng)建元素可以通過(guò)兩種方式1、Dom HTml2、JQuery函數(shù)創(chuàng)建3、頁(yè)面加載的時(shí)候最好在頁(yè)面加載完后執(zhí)行創(chuàng)建，感興趣的朋友可以了解下
2013-04-04
jquery下動(dòng)態(tài)顯示jqGrid以及jqGrid的屬性設(shè)置容易出現(xiàn)問(wèn)題的解決方法
jquery下動(dòng)態(tài)顯示jqGrid以及jqGrid的屬性設(shè)置容易出現(xiàn)問(wèn)題的解決方法，使用jqgrid的朋友可以參考下。
2010-10-10
jQuery實(shí)現(xiàn)貪吃蛇小游戲（附源碼下載）
網(wǎng)上關(guān)于JS實(shí)現(xiàn)貪吃蛇的文章有很多，最近閑來(lái)無(wú)事，想著利用jQury來(lái)實(shí)現(xiàn)貪吃蛇小游戲，下面實(shí)現(xiàn)這篇文章主要介紹了利用jQuery實(shí)現(xiàn)貪吃蛇小游戲的方法，文中給出的是吸納思路和示例代碼，需要的朋友可以參考下。
2017-03-03
jQuery代碼實(shí)現(xiàn)對(duì)話框右上角菜單帶關(guān)閉×
這篇文章主要介紹了jQuery代碼實(shí)現(xiàn)對(duì)話框右上角菜單帶關(guān)閉× 的相關(guān)資料,需要的朋友可以參考下
2016-05-05
jQuery彈出層插件popShow(改進(jìn)版)用法示例
這篇文章主要介紹了jQuery彈出層插件popShow(改進(jìn)版)用法,對(duì)比前文分析了popShow插件的使用方法,需要的朋友可以參考下
2017-01-01
jQuery插件FusionCharts實(shí)現(xiàn)的3D柱狀圖效果實(shí)例【附demo源碼下載】
這篇文章主要介紹了jQuery插件FusionCharts實(shí)現(xiàn)的3D柱狀圖效果,結(jié)合具體實(shí)例形式詳細(xì)分析了FusionCharts插件繪制3D柱狀圖的具體步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2017-03-03
jquery遍歷select元素(實(shí)例講解)
本篇文章主要是對(duì)jquery遍歷select元素的實(shí)例進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-12-12
jquery 中多條件選擇器,相對(duì)選擇器,層次選擇器的區(qū)別
jquery 中多條件選擇器,相對(duì)選擇器,層次選擇器的區(qū)別介紹，需要的朋友可以參考下
2012-07-07
jQuery獲取瀏覽器類型和版本號(hào)的方法
這篇文章主要介紹了jQuery獲取瀏覽器類型和版本號(hào)的方法的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-07-07
使用prop解決一個(gè)checkbox選中后再次選中失效的問(wèn)題
下面小編就為大家?guī)?lái)一篇使用prop解決一個(gè)checkbox選中后再次選中失效的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-07-07