jQuery下实现检测指定元素加载完毕

时间:2023-02-16 00:20:49

检测元素出现方法。
虽然是基于 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下实现检测指定元素加载完毕的更多相关文章

  1. jQuery下实现等待指定元素加载完毕

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

  2. jQuery下实现等待指定元素加载完毕&lpar;可改成纯js版&rpar;

    http://www.poluoluo.com/jzxy/201307/233374.html 代码如下: jQuery.fn.wait = function (func, times, interv ...

  3. python selenium等待特定网页元素加载完毕

    selenium等待特定元素加载完毕 is_disappeared = WebDriverWait(driver, 8, 0.5, ignored_exceptions=TimeoutExceptio ...

  4. jQuery学习(监听DOM加载)

    jQuery的extend方法 function njQuery() { } /* njQuery.extend = function (obj) { // 此时此刻的this就是njQuery这个类 ...

  5. jQuery页面加载完毕事件及jQuery与JavaScript的比较

    1.jQuery概述 jQuery是一个JavaScript库,它集成了JavaScript.DOM.CSS和Ajax,简化了JavaScript编程,提倡write less, do more. 2 ...

  6. HTML页面加载完毕后运行的js

    Js方法:<script type=”text/javascript”> window.onload=function (){ var userName=”xiaoming”; alert ...

  7. jQuery 滚动条 滚动到底部(下拉到底部) 加载数据&lpar;触发事件、处理逻辑&rpar;、分页加载数据

    1.针对浏览器整个窗口滚动 主要代码: <script type="text/javascript"> ; function GetProductListPageFun ...

  8. jQuery WeUI 组件下拉刷新和滚动加载的实现

    最近在做手机版使用到了下拉刷新和滚动加载,记录一下实现过程: 一.引入文件 ? 1 2 3 4 <link rel="stylesheet" href="Conte ...

  9. jQuery&period;ajax&lpar; options &rpar; &colon; 通过 HTTP 请求加载远程数据

    jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据 这个是jQuery 的底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等. $.ajax() ...

随机推荐

  1. Unity3D热更新全书-脚本&lpar;四&rpar; 用C&num;LightEvil搭建实际开发使用的脚本框架

    C#LightEvil之前提供了很多和Unity结合的例子,都是采用把脚本文件放置在StreamingAssets中的方法. 这样可以利用Unity的特性,放在这个目录中的CS文件会被编译器编译,我们 ...

  2. &period;Net 入门资料推荐 (编辑中)

    1.首先推荐 网易云课堂上的一个付费课程:常老师带你学ASP.NET MVC ,价格199元 2. 一个.net的框架,ABP,中文介绍如下 http://www.cnblogs.com/farb/p ...

  3. SQL查看死锁&plus;清理死锁

    ----查看sql死锁 CREATE procedure sp_who_lock    as      begin         declare @spid int         declare ...

  4. java动态加载配置文件&lpar;申明:来源于网络&rpar;

    java动态加载配置文件 地址:http://blog.csdn.net/longvs/article/details/9361449

  5. Spring Data JPA中的动态查询 时间日期

    功能:Spring Data JPA中的动态查询 实现日期查询 页面对应的dto类private String modifiedDate; //实体类 @LastModifiedDate protec ...

  6. 小米盒子 作为nas服务器

    1. webdav缺点:慢优点:方便,不许额外软件 http://blog.csdn.net/laoyiin/article/details/9283023 sw webdav 2. smb缺点:不可 ...

  7. binlog分析方法

    线上处理问题的时候经常遇到业务说写入了但是数据不对,这种情况八成是业务改了之后又改过来了.但是我们需要证据,下面我们就说说简单的binlog分析 工具:mysqlbinlog #-vvv显示明文sql ...

  8. 第6章&&num;160&semi;数组、指针与字符串(一)基于范围的for循环

  9. flask验证登录学习过程(1)---准备

    对应flask的接口开发,目前自己可以熟练的进行.但是深入到更基础的,从注册到验证登录的过程一直不是特别清楚. 趁着年度不是特别忙的时候,特意去学习加强一下.把这个过程记录在此处. 首先是规划一个项目 ...

  10. Thrift简单调用

    pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w ...