知识大全 jQuery下实现等待指定元素加载完毕

Posted 2022-07-20 元素

篇首语：相逢意气为君饮，系马高楼垂柳边。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 jQuery下实现等待指定元素加载完毕相关的知识，希望对你有一定的参考价值。

jQuery下实现等待指定元素加载完毕 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

　　先声明下这个方法的使用场合以免误导大家比如在博客园我们没法修改他的源代码那么只能想办法监视元素的出现了所以下面方法是在修改不了源码的情况下使用而非写自己的项目今天在改博客几个样式的时候以为很自然的加上js就可以实现了没想到那个是ajax加载的数据而非页面首次加载的比如下面的 “提交评论” 按钮右侧的搜索按钮等我很自然的写了

复制代码代码如下: $("#btn_ment_submit") removeClass("ment_btn") addClass("btn"); //提交按钮 $(" div_my_zzk") addClass("input append"); //搜索框 $(" btn_my_zzk") removeClass("btn_my_zzk") addClass("btn"); //搜索按钮

　　可是刷新页面后发现有点不对看了 neork 后发现是 ajax 过来的无奈除了自己写模版之外只能自己想办法修改代码了那么下面就是我想到的等待元素出现方法虽然是基于 jQuery 的但是代码很简洁可以修改成纯js版的

复制代码代码如下: jQuery fn wait = function (func times interval) var _times = times || // 次 _interval = interval || // 毫秒每次 _self = this _selector = this selector //选择器 _iIntervalID; //定时器id if( this length ) //如果已经获取到了就直接执行函数 func && func call(this); else _iIntervalID = setInterval(function() if(!_times) //是就退出 clearInterval(_iIntervalID); _times <= || _times ; //如果是正数就 _self = $(_selector); //再次选择 if( _self length ) //判断是否取到 func && func call(_self); clearInterval(_iIntervalID); _interval); return this;

　　使用方法当然也很简单只有个参数 func 是回调函数就是当指定元素出现后就执行的函数 times 是检测次数默认是一直检测直到出现为止 interval 是检测间隔默认毫秒一次我们修改下之前的代码

复制代码代码如下: $("#btn_ment_submit") wait(function() //等待#btn_ment_submit元素的加载 this removeClass("ment_btn") addClass("btn"); //提交按钮 //这里的 this 就是 $("#btn_ment_submit") ); $("#widget_my_zzk") wait(function() //等待#widget_my_zzk元素的加载 $(" div_my_zzk") addClass("input append"); //搜索框 $(" btn_my_zzk") removeClass("btn_my_zzk") addClass("btn"); //搜索按钮 ); cha138/Article/program/Java/JSP/201311/19959