jQuery下实现等待指定元素加载完毕(可改成纯js版)
先声明下这个方法的使用场合，以免误导大家。
比如在博客园，我们没法修改他的源代码，
那么只能想办法监视元素的出现了。
所以下面方法是在修改不了源码的情况下使用，而非写自己的项目。
今天在改博客几个样式的时候，以为很自然的加上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();
但是后来想想，元素都没加载，继续链下去也没意义，不过算了，不改了，就这样吧。呵呵 :-)
最后说点，，我经验尚浅，如果那里写的不对，还请各位大侠指点。
相关推荐
-
jquery处理页面弹出层查询数据等待操作实例
本文实例讲述了jquery处理页面弹出层查询数据等待操作.分享给大家供大家参考.具体实现方法如下: $(document).ready(function(){ layer.load(0); //初始化加载 //可选范围(0-9)0表示等返回结果后关闭,1-9表示自动关闭时间(s) }); 当查询结果集返回后,设置关闭等待的样式 function init_page_pro(sdate, pro) { $.post("detail.key", { 'pro' : pro, 'sdate'
-
jquery等待效果示例
实现查询等待:正在查询中,请稍后．．． 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title> 正在查询,请稍等... </title> <style type="text/css&q
-
jquery.blockUI.js上传滚动等待效果实现思路及代码
请求的url: 复制代码 代码如下: function request(url, onSuccess, paras, method, isAsync, isMask) { $.ajax({type:method,url:url,async:isAsync,data:paras,success:function(request){onSuccess(request,isMask);},error:function(e) {if(isMask) $('#div_mask').unblock();},
-
Js Jquery创建一个弹出层可加载一个页面
复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"
-
jquery 弹出层注册页面等(asp.net后台)
[一]需求如下: 1:注册不新开页面,改成弹出层, 2:新增用户买房欲望调查, 3:用户名自动检索出推荐的用户名, 4:出生日期用户输入改成控件选择. 5:尽力提高用户体验,吸引用户注册. [二]无图无真相. 1:简化后的页面: 2:浮出文字提示和圆角边框: 3:支持民意调查(异步提交) 4:自动检索推荐用户名(测试数据) 5:数据有效性验证 6:日历 7:支持拖拽 8:滑入显示 9:over [三]代码分析1.弹出层的制作, a.先引用这三个: 复制代码 代码如下: <script src=&qu
-
jquery实现加载等待效果示例
复制代码 代码如下: var dates = this.options.form.getWidgetByName("dates").getValue(); $.ajax({ url: "http://127.0.0.1:9009/Brilliantzz/service/snproduct.do", data:dates, beforeSend:function() { var h = document.body.clientHeight; $("<d
-
jQuery下实现等待指定元素加载完毕(可改成纯js版)
先声明下这个方法的使用场合,以免误导大家. 比如在博客园,我们没法修改他的源代码, 那么只能想办法监视元素的出现了. 所以下面方法是在修改不了源码的情况下使用,而非写自己的项目. 今天在改博客几个样式的时候,以为很自然的加上js就可以实现了, 没想到那个是ajax加载的数据,而非页面首次加载的, 比如下面的 "提交评论" 按钮,右侧的 搜索按钮 等. 我很自然的写了 复制代码 代码如下: 1 $("#btn_comment_submit").removeClass(
-
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
本文实例讲述了jQuery实现在HTML文档加载完毕后自动执行某个事件的方法.分享给大家供大家参考,具体如下: 原来onchange="fucntionname(parms)": <select name="country" id="selCountries_{$sn}" onchange="region.changed(this, 1, 'selProvinces_{$sn}')" style="border
-
JavaScript判断DOM何时加载完毕的技巧
处理HTML DOM文档存在一个难题是,JavaScript可以在DOM完全加载之前执行,这会给你的代码引发不少的潜在问题.浏览器的渲染和操作顺序大致如下列表: HTML解析完毕 外部脚本和样式表加载完毕 脚本在文档内解析并执行 HTML DOM完全构造起来 图片和外部内容加载 网页完成加载 在网页头部并且从外部文件加载的脚本会在HTML真正构造之前执行.如前所述,这是个至关重要的问题,因为这两处执行的脚本并不能访问还不存在的DOM.幸好,我们还有若干的补救方法. 目前,最常用的级数是完全等待整
-
两种方法实现在HTML页面加载完毕后运行某个js
js方法: 复制代码 代码如下: <script type="text/javascript"> window.onload=function(){ var userName="xiaoming"; alert(userName); } </script> 以下为jQuery方法,需要引用jQuery文件. 复制代码 代码如下: <script type="text/javascript"> $(documen
-
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
一.问题分析 对于后台系统,相比大家都有所印象,知道其中的布局结构,如图: 在这种布局中我们需要将header,sidebar,footer分开,而且对于中间部分的content内容需要动态变化,即根据不同菜单定位到不同页面,而整体布局不会变化 这种布局结构对于单纯的HTML不具备这种嵌入各部分内容的能力,所以就需要我们自己来寻找或者解决这种问题,由于jquery的兼容性和使用广度比较不错,这里 使用jquery的load方法来处理这种页面布局框架. 二.load方法详解 1.定义 $(sele
-
JS+CSS实现下拉刷新/上拉加载插件
闲来无事,写了一个当下比较常见的下拉刷新/上拉加载的jquery插件,代码记录在这里,有兴趣将代码写成插件与npm包可以留言. 体验地址:http://owenliang.github.io/pullToRefresh/ 项目地址:https://github.com/owenliang/pullToRefresh 实现注意: 利用transition做动画时,优先使用transform:translate取代top,后者动画流畅度存在问题. 各移动浏览器对手势触摸的处理不同(简单罗列如下),但
-
JavaScript & jQuery完美判断图片是否加载完毕
众所周知,常见瀑布流当鼠标滚动到浏览器底部的时候,就会发起一个ajax的请求.在服务端生成item列表后,通过 js append到相应的div里边. 看起来很简单的样子,关键问题就出在图片的加载问题上,图片一般都放在服务器上,通过http下载到客户端. 例如我的图片地址: http://xxx.xxx.com/sc/item/cover/9-4352-c400.jpg 而图片下载到本地是需要一定时间的(网速快的路过).当图片还没有下载完的时候,使用js获取到元素的宽高将会是0. 有的同学说了我
-
原生js实现下拉刷新和上拉加载更多
本文实例为大家分享了js实现下拉刷新和上拉加载更多的具体代码,供大家参考,具体内容如下 1.下拉刷新 由于原生js太久不用了,这里列一下此处涉及到的前置知识点: 移动端触屏事件: touchstart(手指按下的一瞬间),touchmove(手指在屏幕上移动时),touchend(手指松开时) 手指在页面上的坐标: pageX,pageY 写之前首先要懂原理,下拉刷新的本质就是用户在页面顶部进行上拉动作时拉到一定的距离触发数据刷新. 大概需要做的几个点: 1.在手指按下时(touchstart)
-
vue如何实现el-select下拉选项的懒加载
目录 滚动加载的核心逻辑 在vue中处理数据懒加载 在vue组件中使用指令 v-lazy-load Element 指令v-infinite-scroll 下拉选择是常用的用户交互选择的操作:常用固定选择项或者动态渲染选择项. 实际项目中存在数据量大,一次性渲染很多数据会造成下拉卡顿的问题,通过滚动懒加载,逐步增加下拉选项. 滚动加载的核心逻辑 通过监听容器的滚动事件,滚到最底部时,执行加载数据函数. interface IScrollOption { distance: number; //
-
如何解决jQuery EasyUI 已打开Tab重新加载问题
先给大家说下我的需求,如下: 点击左侧已经打开的tab可以刷新重新加载datagrid. 也就是说解决easyui 左侧tab重新刷新加载问题实现. 实现如下: function addTab(subtitle, url) { if (!$('#tabs').tabs('exists', subtitle)) { $('#tabs').tabs('add', { title : subtitle, content :<span style="font-family: Arial, Helv