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 相关文章推荐
网页开发中的容易忽略的问题 javascript HTML中的table
Apr 15 Javascript
jQuery Selector选择器小结
May 06 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
Jul 13 Javascript
Javascript函数的参数
Jul 16 Javascript
用js编写的简单的计算器代码程序
Aug 04 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
Sep 19 Javascript
javascript函数命名的三种方式及区别介绍
Mar 22 Javascript
bootstrap组件之按钮式下拉菜单小结
Jan 19 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
Jan 19 Javascript
vue下canvas裁剪图片实例讲解
Apr 16 Javascript
vue+axios全局添加请求头和参数操作
Jul 24 Javascript
nestjs返回给前端数据格式的封装实现
Feb 22 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
php中用memcached实现页面防刷新功能
2014/08/19 PHP
ThinkPHP中公共函数路径和配置项路径的映射分析
2014/11/22 PHP
php中pcntl_fork创建子进程的方法实例
2019/03/14 PHP
XML的代替者----JSON
2007/07/21 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
js新闻滚动 js如何实现新闻滚动效果
2013/01/07 Javascript
js动态生成指定行数的表格
2013/07/11 Javascript
js实现目录定位正文示例
2013/11/14 Javascript
js阻止事件追加的具体实现
2014/10/15 Javascript
Javascript实现颜色rgb与16进制转换的方法
2015/04/18 Javascript
原生JS和JQuery动态添加、删除表格行的方法
2015/05/28 Javascript
jquery不常用方法汇总
2015/07/26 Javascript
javascript控制图片播放的实现代码
2020/07/29 Javascript
JavaScript中的this到底是什么(一)
2015/12/09 Javascript
javascript+HTML5自定义元素播放焦点图动画
2016/02/21 Javascript
基于vue.js无缝滚动效果
2018/01/25 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
2018/01/26 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
2018/03/06 Javascript
JQuery元素快速查找与操作
2018/04/22 jQuery
Node.js中你不可不精的Stream(流)
2018/06/08 Javascript
Vue.js组件实现选项卡以及切换特效
2019/07/24 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
2020/06/10 Javascript
elementUI同一页面展示多个Dialog的实现
2020/11/19 Javascript
[01:08:43]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第一场 1月9日
2021/03/11 DOTA
python二叉树的实现实例
2013/11/21 Python
解析Python中while true的使用
2015/10/13 Python
python 魔法函数实例及解析
2019/09/25 Python
Python中的X[:,0]、X[:,1]、X[:,:,0]、X[:,:,1]、X[:,m:n]和X[:,:,m:n]
2020/02/13 Python
Bootstrap 学习分享
2012/11/12 HTML / CSS
如何利用input事件来监听移动端的输入
2016/04/15 HTML / CSS
科室工作的个人自我评价
2013/10/30 职场文书
2014年中班元旦活动方案
2014/02/14 职场文书
中文专业毕业生自荐信
2014/05/24 职场文书
数学系毕业生求职信
2014/05/29 职场文书
客房服务员岗位职责
2015/02/09 职场文书
关于办理居住证的介绍信模板
2019/11/27 职场文书