jQuery下实现等待指定元素加载完毕(可改成纯js版)
更新时间:2013年07月11日 17:14:54 作者:
下面就是我想到的等待元素出现方法,虽然是基于jQuery的,但是代码很简洁,可以修改成纯js版的,感兴趣的朋友可以参考下哈,希望对大家有所帮助
先声明下这个方法的使用场合,以免误导大家。
比如在博客园,我们没法修改他的源代码,
那么只能想办法监视元素的出现了。
所以下面方法是在修改不了源码的情况下使用,而非写自己的项目。
今天在改博客几个样式的时候,以为很自然的加上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();
但是后来想想,元素都没加载,继续链下去也没意义,不过算了,不改了,就这样吧。呵呵 :-)
最后说点,,我经验尚浅,如果那里写的不对,还请各位大侠指点。
比如在博客园,我们没法修改他的源代码,
那么只能想办法监视元素的出现了。
所以下面方法是在修改不了源码的情况下使用,而非写自己的项目。
今天在改博客几个样式的时候,以为很自然的加上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();
但是后来想想,元素都没加载,继续链下去也没意义,不过算了,不改了,就这样吧。呵呵 :-)
最后说点,,我经验尚浅,如果那里写的不对,还请各位大侠指点。
您可能感兴趣的文章:
- javascript与jquery动态创建html元素示例
- js jquery获取当前元素的兄弟级 上一个 下一个元素
- js与jquery获取父元素,删除子元素的两种不同方法
- JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
- js与jquery获取父级元素,子级元素,兄弟元素的实现方法
- js jquery 获取某一元素到浏览器顶端的距离实现方法
- JS加jquery简单实现标签元素的显示或隐藏
- JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
- jquery和javascript中如何将一元素的内容赋给另一元素
- jQuery与javascript对照学习 获取父子前后元素 实现代码
- jQuery和JavaScript节点插入元素的方法对比
- jQuery与原生JavaScript选择HTML元素集合用法对比分析
相关文章
Jquery change(fontsize,background) 改变颜色与背景的代码
基于Jquery的改变颜色与背景的代码,对于学习jquery的朋友可以参考下。2010-05-05
最新评论