jQuery下实现等待指定元素加载完毕(可改成纯js版)


Posted in Javascript onJuly 11, 2013

先声明下这个方法的使用场合,以免误导大家。
比如在博客园,我们没法修改他的源代码,
那么只能想办法监视元素的出现了。
所以下面方法是在修改不了源码的情况下使用,而非写自己的项目。

今天在改博客几个样式的时候,以为很自然的加上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 相关文章推荐
js调用flash的效果代码
Apr 26 Javascript
jWiard 基于JQuery的强大的向导控件介绍
Oct 28 Javascript
jquery获取radio值(单选组radio)
Oct 16 Javascript
使用变量动态设置js的属性名
Oct 19 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
Jun 10 Javascript
Angular2使用Augury来调试Angular2程序
May 21 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
Jul 18 Javascript
JavaScript 用fetch 实现异步下载文件功能
Jul 21 Javascript
解析Vue 2.5的Diff算法
Nov 28 Javascript
Angularjs实现多图片上传预览功能
Jul 18 Javascript
Nuxt.js SSR与权限验证的实现
Nov 21 Javascript
vuex 实现getter值赋值给vue组件里的data示例
Nov 05 Javascript
多个datatable共存造成多个表格的checkbox都被选中
Jul 11 #Javascript
JS 添加千分位与去掉千分位的示例
Jul 11 #Javascript
在js文件中如何获取basePath处理js路径问题
Jul 10 #Javascript
使用闭包对setTimeout进行简单封装避免出错
Jul 10 #Javascript
js Map List 遍历使用示例
Jul 10 #Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
Jul 10 #Javascript
JS下拉框内容左右移动效果的具体实现
Jul 10 #Javascript
You might like
Mysql和网页显示乱码解决方法集锦
2008/03/27 PHP
PHP中获取变量的变量名的一段代码的bug分析
2011/07/07 PHP
php中禁止单个IP与ip段访问的代码小结
2012/07/04 PHP
php使用websocket示例详解
2014/03/12 PHP
分享常见的几种页面静态化的方法
2015/01/08 PHP
在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析
2016/03/06 PHP
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
2012/12/09 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
2014/01/07 Javascript
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
javascript 事件处理示例分享
2014/12/31 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
2015/09/19 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
2015/10/10 Javascript
浅谈js的html元素的父节点,子节点
2016/08/06 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
2016/10/16 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
Centos7 安装Node.js10以上版本的方法步骤
2019/10/15 Javascript
es6数组之扩展运算符操作实例分析
2020/04/25 Javascript
[02:17]《辉夜杯》TRG战队巡礼
2015/10/26 DOTA
python调用fortran模块
2016/04/08 Python
老生常谈Python进阶之装饰器
2017/05/11 Python
python自定义异常实例详解
2017/07/11 Python
python 将字符串转换成字典dict的各种方式总结
2018/03/23 Python
基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)
2019/08/06 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
台湾最大网路书店:博客来
2018/03/18 全球购物
实习评语大全
2014/04/26 职场文书
中学生英语演讲稿
2014/04/26 职场文书
我的教育故事演讲稿
2014/05/04 职场文书
材料成型及控制工程专业求职信
2014/06/19 职场文书
个人务虚会发言材料
2014/10/20 职场文书
2014小学教师年度考核工作总结
2014/12/03 职场文书
资料员岗位职责
2015/02/10 职场文书
爱鸟护鸟的宣传语
2015/07/13 职场文书
Redis源码阅读:Redis字符串SDS详解
2021/07/15 Redis
使用CSS设置滚动条样式
2022/01/18 HTML / CSS