[jQuery]等待指定元素加载完毕后执行

最近要写一个功能,仿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;
});



微信扫描下方的二维码阅读本文

赞(0)