快捷導(dǎo)航

jQuery下實(shí)現(xiàn)等待指定元素加載完畢(可改成純js版)

更新時(shí)間：2013年07月11日 17:14:54 作者：

下面就是我想到的等待元素出現(xiàn)方法，雖然是基于jQuery的，但是代碼很簡(jiǎn)潔，可以修改成純js版的,感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助

先聲明下這個(gè)方法的使用場(chǎng)合，以免誤導(dǎo)大家。
比如在博客園，我們沒(méi)法修改他的源代碼，
那么只能想辦法監(jiān)視元素的出現(xiàn)了。
所以下面方法是在修改不了源碼的情況下使用，而非寫(xiě)自己的項(xiàng)目。

今天在改博客幾個(gè)樣式的時(shí)候，以為很自然的加上js就可以實(shí)現(xiàn)了，
沒(méi)想到那個(gè)是ajax加載的數(shù)據(jù)，而非頁(yè)面首次加載的，
比如下面的 “提交評(píng)論” 按鈕，右側(cè)的搜索按鈕等。
我很自然的寫(xiě)了

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

 
$("#btn_comment_submit").removeClass("comment_btn").addClass("btn"); //提交按鈕 
$(".div_my_zzk").addClass("input-append"); //搜索框 
$(".btn_my_zzk").removeClass("btn_my_zzk").addClass("btn"); //搜索按鈕 

可是刷新頁(yè)面后發(fā)現(xiàn)有點(diǎn)不對(duì)，看了 network 后發(fā)現(xiàn)是 ajax 過(guò)來(lái)的，
無(wú)奈，除了自己寫(xiě)模版之外，只能自己想辦法修改代碼了。

那么下面就是我想到的等待元素出現(xiàn)方法。
雖然是基于 jQuery 的，但是代碼很簡(jiǎn)潔，可以修改成純js版的。

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

 
jQuery.fn.wait = function (func, times, interval) { 
var _times = times || -1, //100次 
_interval = interval || 20, //20毫秒每次 
_self = this, 
_selector = this.selector, //選擇器 
_iIntervalID; //定時(shí)器id 
if( this.length ){ //如果已經(jīng)獲取到了，就直接執(zhí)行函數(shù) 
func && func.call(this); 
} else { 
_iIntervalID = setInterval(function() { 
if(!_times) { //是0就退出 
clearInterval(_iIntervalID); 
} 
_times <= 0 || _times--; //如果是正數(shù)就 -- 

_self = $(_selector); //再次選擇 
if( _self.length ) { //判斷是否取到 
func && func.call(_self); 
clearInterval(_iIntervalID); 
} 
}, _interval); 
} 
return this; 
} 

使用方法當(dāng)然也很簡(jiǎn)單，只有3個(gè)參數(shù)。
func 是回調(diào)函數(shù)，就是當(dāng)指定元素出現(xiàn)后就執(zhí)行的函數(shù)。
times 是檢測(cè)次數(shù)，默認(rèn)是-1，一直檢測(cè)直到出現(xiàn)為止。
interval 是檢測(cè)間隔，默認(rèn) 20 毫秒一次。

我們修改下之前的代碼

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

 
$("#btn_comment_submit").wait(function() { //等待#btn_comment_submit元素的加載 
this.removeClass("comment_btn").addClass("btn"); //提交按鈕 
//這里的 this 就是 $("#btn_comment_submit") 
}); 

$("#widget_my_zzk").wait(function() { //等待#widget_my_zzk元素的加載 
$(".div_my_zzk").addClass("input-append"); //搜索框 
$(".btn_my_zzk").removeClass("btn_my_zzk").addClass("btn"); //搜索按鈕 
}); 

是不是很簡(jiǎn)單、、

當(dāng)然，依然不破壞jQuery的鏈?zhǔn)浇Y(jié)構(gòu)，你依然可以 $("#id").wait(function(){}).hide();
但是后來(lái)想想，元素都沒(méi)加載，繼續(xù)鏈下去也沒(méi)意義，不過(guò)算了，不改了，就這樣吧。呵呵 :-)

最后說(shuō)點(diǎn)，，我經(jīng)驗(yàn)尚淺，如果那里寫(xiě)的不對(duì)，還請(qǐng)各位大俠指點(diǎn)。

您可能感興趣的文章: