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的&amp;&amp;和||的另类用法
Jul 23 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
Feb 18 Javascript
jQuery实现简单的日期输入格式化控件
Mar 12 Javascript
JavaScript中的Math.atan2()方法使用详解
Jun 15 Javascript
详解jQuery的表单验证插件--Validation
Dec 21 Javascript
2种简单的js倒计时方式
Oct 20 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
Dec 26 Javascript
基于vue2.x的电商图片放大镜插件的使用
Jan 22 Javascript
解决webpack无法通过IP地址访问localhost的问题
Feb 22 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
Sep 21 Javascript
Vue2.0 实现页面缓存和不缓存的方式
Nov 12 Javascript
vue组件内部引入外部js文件的方法
Jan 18 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 array_multisort()函数的使用札记
2011/07/03 PHP
PHP操作数组的一些函数整理介绍
2011/07/17 PHP
php自定义urlencode,urldecode函数实例
2015/03/24 PHP
Codeigniter的dom类用法实例
2015/06/26 PHP
PHP发送AT指令实例代码
2016/05/26 PHP
php往mysql中批量插入数据实例教程
2018/12/12 PHP
php 根据URL下载远程图片、压缩包、pdf等文件到本地
2019/07/26 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
JavaScript 对象、函数和继承
2009/07/07 Javascript
理解Javascript_11_constructor实现原理
2010/10/18 Javascript
juqery 学习之三 选择器 简单 内容
2010/11/25 Javascript
jquery弹出框的用法示例(一)
2013/08/26 Javascript
AngularJS ng-controller 指令简单实例
2016/08/01 Javascript
JavaScript中的await/async的作用和用法
2016/10/31 Javascript
支持移动端原生js轮播图
2017/02/16 Javascript
vuex的module模块用法示例
2018/11/12 Javascript
VUE中V-IF条件判断改变元素的样式操作
2020/08/09 Javascript
python脚本内运行linux命令的方法
2015/07/02 Python
Python中规范定义命名空间的一些建议
2016/06/04 Python
python组合无重复三位数的实例
2018/11/13 Python
Python 使用PyQt5 完成选择文件或目录的对话框方法
2019/06/27 Python
python 通过邮件控制实现远程控制电脑操作
2020/03/16 Python
Django URL参数Template反向解析
2020/11/24 Python
iRobot官网:改变生活的家用机器人品牌
2016/09/20 全球购物
亚洲航空公司官方网站:AirAsia
2019/11/25 全球购物
公司综合部的成员自我评价分享
2013/11/05 职场文书
档案管理员岗位职责
2013/12/01 职场文书
三八妇女节活动主持词
2014/03/17 职场文书
新年联欢会主持词
2014/03/27 职场文书
给学校建议书范文
2014/05/13 职场文书
群众路线查摆问题及整改措施
2014/10/10 职场文书
质监局领导班子践行群众路线整改方案
2014/10/26 职场文书
今日说法观后感
2015/06/08 职场文书
小学班级管理心得体会
2016/01/07 职场文书
OpenCV 图像梯度的实现方法
2021/07/25 Python
聊聊配置 Nginx 访问与错误日志的问题
2022/05/25 Servers