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 相关文章推荐
jquery选择器之基本过滤选择器详解
Jan 27 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
Apr 07 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
May 28 Javascript
javascript实现在网页中运行本地程序的方法
Feb 03 Javascript
JavaScript之生成器_动力节点Java学院整理
Jun 30 Javascript
浅谈vuejs实现数据驱动视图原理
Feb 23 Javascript
使用Angular CLI进行Build(构建)和Serve详解
Mar 24 Javascript
详解ES6 Promise对象then方法链式调用
Oct 20 Javascript
微信小程序自定义轮播图
Nov 04 Javascript
微信小程序导航栏跟随滑动效果的实现代码
May 14 Javascript
小程序中设置缓存过期的实现方法
Jan 14 Javascript
微信小程序收藏功能的实现代码
Jun 19 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
dedecms模板标签代码官方参考
2007/03/17 PHP
php中计算中文字符串长度、截取中文字符串的函数代码
2011/08/09 PHP
PHP实现登陆并抓取微信列表中最新一组微信消息的方法
2017/07/10 PHP
PHP设计模式入门之状态模式原理与实现方法分析
2020/04/26 PHP
自己动手开发jQuery插件教程
2011/08/25 Javascript
再谈querySelector和querySelectorAll的区别与联系
2012/04/20 Javascript
jquery禁止回车触发表单提交
2014/12/12 Javascript
JQuery调用绑定click事件的3种写法
2015/03/28 Javascript
js 动态给元素添加、移除事件的实现方法
2016/07/19 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
2016/09/25 Javascript
jQuery事件对象总结
2016/10/17 Javascript
Bootstrap源码解读导航条(7)
2016/12/23 Javascript
微信小程序使用Socket的实例
2017/09/19 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
VUE安装使用教程详解
2019/06/03 Javascript
解决layui 三级联动下拉框更新时回显的问题
2019/09/03 Javascript
vue实现扫码功能
2020/01/17 Javascript
解决windows下Sublime Text 2 运行 PyQt 不显示的方法分享
2014/06/18 Python
如何在Win10系统使用Python3连接Hive
2020/10/15 Python
canvas像素点操作之视频绿幕抠图
2018/09/11 HTML / CSS
canvas进阶之如何画出平滑的曲线
2018/10/15 HTML / CSS
智能电子秤、手表和健康监测仪:Withings(之前为诺基亚健康)
2018/10/30 全球购物
PHP如何防止SQL注入
2014/05/03 面试题
财务会计专业毕业生自荐信
2013/10/02 职场文书
门诊挂号室室长岗位职责
2013/11/27 职场文书
企业管理培训感言
2014/01/27 职场文书
广告业务员岗位职责
2014/02/06 职场文书
《蜗牛的奖杯》教后反思
2014/04/24 职场文书
人事经理岗位职责
2014/04/28 职场文书
取保候审保证书
2014/04/30 职场文书
民族团结好少年事迹材料
2014/08/19 职场文书
民主生活会发言材料
2014/10/20 职场文书
2014年人事专员工作总结
2014/11/19 职场文书
史上最全书信经典范文大全(建议收藏)
2019/07/10 职场文书
Go中的条件语句Switch示例详解
2021/08/23 Golang
Python 数据可视化之Matplotlib详解
2021/11/02 Python