最近要写一个功能,仿instantclick
的预加载模式,我想着修改一下自己的pjax代码也加入一个鼠标悬停即开始请求的过程,mouseenter
将请求到的部分先放到一个div里面,直到鼠标点击,再从div里面把请求的部分直接拿出来替换。很多时候鼠标点下时,div里还没有东西,此时就需要等待直到被请求的元素加载过来为止才能继续执行后面的操作。
百度了一下,换了好几个关键词,终于被我找了这样功能的函数:
以下代码来自脚本之家
// 等待指定元素加载完成后执行回调 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; }
使用方法当然也很简单:
$(selector).wait(func,times,interval);
只有3个参数。
func
是回调函数,就是当指定元素出现后就执行的函数。
times
是检测次数,默认是-1,一直检测直到出现为止。
interval
是检测间隔,默认 20 毫秒一次。
示例
$('body').on("click",'a[target!=_blank]:not(.noajx,.noajx a)', function() { url = $(this).attr("href"); if (check_x(url)==true) return; $("#temp #main").wait(function() { //等待#temp #main元素的加载完成 $(ajx_content).html($('#temp').html()); $('html,body').animate({scrollTop:$('body').offset().top+50},0).animate({scrollTop:0},800); }); return false; });
本站文章除注明转载/出处外,均为本站原创或翻译。若要转载但请务必注明出处,尊重他人劳动成果。
转载请注明出处链接 : https://www.inlojv.com/5084.html