DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> jQuery下實現等待指定元素加載完畢
jQuery下實現等待指定元素加載完畢
編輯:JavaScript綜合知識     

先聲明下這個方法的使用場合,以免誤導大家。
比如在博客園,我們沒法修改他的源代碼,
那麼只能想辦法監視元素的出現了。
所以下面方法是在修改不了源碼的情況下使用,而非寫自己的項目。

今天在改博客幾個樣式的時候,以為很自然的加上js就可以實現了,
沒想到那個是ajax加載的數據,而非頁面首次加載的,
比如下面的 “提交評論” 按鈕,右側的 搜索按鈕 等。
我很自然的寫了
 

復制代碼 代碼如下:
1 $("#btn_comment_submit").removeClass("comment_btn").addClass("btn"); //提交按鈕
2 $(".div_my_zzk").addClass("input-append"); //搜索框
3 $(".btn_my_zzk").removeClass("btn_my_zzk").addClass("btn"); //搜索按鈕



可是刷新頁面後發現有點不對,看了 network 後發現是 ajax 過來的,
無奈,除了自己寫模版之外,只能自己想辦法修改代碼了。

那麼下面就是我想到的等待元素出現方法。
雖然是基於 jQuery 的,但是代碼很簡潔,可以修改成純js版的。

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

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


使用方法當然也很簡單,只有3個參數。
func 是回調函數,就是當指定元素出現後就執行的函數。
times 是檢測次數,默認是-1,一直檢測直到出現為止。
interval 是檢測間隔,默認 20 毫秒一次。

我們修改下之前的代碼

復制代碼 代碼如下:
$("#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"); //搜索按鈕
});


是不是很簡單、、

當然,依然不破壞jQuery的鏈式結構,你依然可以 $("#id").wait(function(){}).hide();
但是後來想想,元素都沒加載,繼續鏈下去也沒意義,不過算了,不改了,就這樣吧。呵呵 :-)

最後說點,,我經驗尚淺,如果那裡寫的不對,還請各位大俠指點。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved