jQuery下实现等待指定元素加载完毕
先声明下这个方法的使用场合,以免误导大家。。
比如在博客园,我们没法修改他的源代码,
那么只能想办法监视元素的出现了。
所以下面方法是在修改不了源码的情况下使用,而非写自己的项目。。
今天在改博客几个样式的时候,以为很自然的加上js就可以实现了,
没想到那个是ajax加载的数据,而非页面首次加载的,
比如下面的 “提交评论” 按钮,右侧的 搜索按钮 等。
我很自然的写了
$("#btn_comment_submit").removeClass("comment_btn").addClass("btn"); //提交按钮
$(".div_my_zzk").addClass("input-append"); //搜索框
$(".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();
但是后来想想,元素都没加载,继续链下去也没意义,不过算了,不改了,就这样吧。呵呵 :-)
最后说点,,我经验尚浅,如果那里写的不对,还请各位大侠指点。
jQuery下实现等待指定元素加载完毕的更多相关文章
- jQuery下实现等待指定元素加载完毕(可改成纯js版)
http://www.poluoluo.com/jzxy/201307/233374.html 代码如下: jQuery.fn.wait = function (func, times, interv ...
- jQuery下实现检测指定元素加载完毕
检测元素出现方法.虽然是基于 jQuery 的,但是代码很简洁,可以修改成纯js版的. 文本 jQuery.fn.wait = function (func, times, interval) { v ...
- python selenium等待特定网页元素加载完毕
selenium等待特定元素加载完毕 is_disappeared = WebDriverWait(driver, 8, 0.5, ignored_exceptions=TimeoutExceptio ...
- jq常用事件(on,blur,focus,change),js/jq等待图片(页面)加载完毕事件,js读取文件
jq常用事件(on,blur,focus,change) // 方法一(推荐) $('.box').on( "click",function() {} ) $('.box').on ...
- jquery等待特定元素加载再执行相关函数
jQuery.fn.wait = function (func, times, interval) { var _times = times || 100, //100次 _interval = in ...
- appium 等待页面元素加载
前面没找到合适的函数,用的是 try{Thread.sleep(10);}catch(Exception e){} 但是这个时间得自己控制,强制等待加载,很2的办法,后来终于找到一个合适的替代函数了 ...
- selenium webdriver学习-怎么等待页面元素加载完成
http://blog.csdn.net/aerchi/article/details/8055913 WebDriverWait类和ExpectedCondition
- jQuery学习(监听DOM加载)
jQuery的extend方法 function njQuery() { } /* njQuery.extend = function (obj) { // 此时此刻的this就是njQuery这个类 ...
- jQuery页面加载完毕事件及jQuery与JavaScript的比较
1.jQuery概述 jQuery是一个JavaScript库,它集成了JavaScript.DOM.CSS和Ajax,简化了JavaScript编程,提倡write less, do more. 2 ...
随机推荐
- Kaggle: Google Analytics Customer Revenue Prediction EDA
前言 内容提要 本文为Kaggle竞赛 Google Analytics Customer Revenue Prediction 的探索性分析 题目要求根据历史顾客访问GStore的数据,预测其中部分 ...
- Python列表知识点讲解
增删改查 增 X.append函数是在原有列表中的末尾追加一个新的元素存放在列表中 X.extend() 将一个列表中的元素添加到另一个列表中,将所引用的原列表保持不变,同时extend还可以运用到, ...
- 1094. The Largest Generation (25)-(dfs,树的遍历,统计每层的节点数)
题目很简单,就是统计一下每层的节点数,输出节点数最多的个数和对应的层数即可. #include <iostream> #include <cstdio> #include &l ...
- thinkphp在wamp 配置去掉url中index.php方法
http://blog.csdn.net/youmypig/article/details/45008971
- X86主要的几种寻址方式
一.首先 P33: 严格来说有三种寻址方式 与数据有关的寻址方式 与转移指令或过程调用指令有关的寻址方式 与IO指令有关的寻址方式 这篇博客只讲1.2两条 二.然后 1. 与数据有关的寻址方式 数据, ...
- 基于 Java Web 的毕业设计选题管理平台--系统设计和任务分配
一.团队作业:http://www.yzhiliao.com/course/70/task/440/show 二.个人作业: 1.项目的代码托管 (1).GitHub 地址:https://githu ...
- ci test
下载ci 版本 3.1.9 下载地址 https://www.codeigniter.com/ 怎么查看CI的版本信息?想看某个项目中使用的CI具体是哪个版本,怎么查看?system\core\cod ...
- CMS垃圾回收过程
1.总体介绍: CMS(Concurrent Mark-Sweep)是以牺牲吞吐量为代价来获得最短回收停顿时间的垃圾回收器.对于要求服务器响应速度的应用上,这种垃圾回收器非常适合.在启动JVM参数加上 ...
- Linux下利用json-c从一个json数组中提取每一个元素中的部分字段组成一个新json数组
先把代码贴上来,有时间整理一下 首先说一下要实现的功能: 假定现在有一个json格式的字符串,而且他是一个josn中的数组,比如: [ { "id": "NEW20170 ...
- [知乎]BAT占线
黑色自有,蓝色全资收够,红色入股. https://www.zhihu.com/question/304396738/answer/547766603