熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

jQuery下實現等待指定元素加載完畢

2013-11-15 11:57:18  來源: JSP教程 

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

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

復制代碼 代碼如下:
$("#btn_comment_submit")removeClass("comment_btn")addClass("btn"); //提交按鈕
$("div_my_zzk")addClass("inputappend"); //搜索框
$("btn_my_zzk")removeClass("btn_my_zzk")addClass("btn"); //搜索按鈕

  

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

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

復制代碼 代碼如下:
jQueryfnwait = function (func times interval) {
var _times = times || //
_interval = interval || //毫秒每次
_self = this
_selector = thisselector //選擇器
_iIntervalID; //定時器id
if( thislength ){ //如果已經獲取到了就直接執行函數
func && funccall(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是就退出
clearInterval(_iIntervalID);
}
_times <= || _times; //如果是正數就

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

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

我們修改下之前的代碼

復制代碼 代碼如下:
$("#btn_comment_submit")wait(function() { //等待#btn_comment_submit元素的加載
thisremoveClass("comment_btn")addClass("btn"); //提交按鈕
//這裡的 this 就是 $("#btn_comment_submit")
});

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

  
是不是很簡單

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

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


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19959.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.