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();

  但是后来想想,元素都没加载,继续链下去也没意义,不过算了,不改了,就这样吧。呵呵 :-)

  最后说点,,我经验尚浅,如果那里写的不对,还请各位大侠指点。