Question

由于我无法控制的原因，我必须通过动态附加的<script>标记加载jQuery，并且仅在页面加载时的某些任意事件 not 上执行此操作。

我的问题在于检测jquery准备就绪的时刻，因为下面的代码不起作用：

(function(){
    var s=document.createElement('script');
    s.setAttribute('type','text/javascript');
    s.setAttribute('src','http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js');
    document.getElementsByTagName('head')[0].appendChild(s);
})()

$(document).ready(function() {
  // something that uses jquery and currently doesn't work
});

如何检测jquery准备好在此特定配置中使用的时刻？

提前致谢

Answer 1

使用onload和onreadystatechange事件处理程序：

var scr   = document.createElement('script'),
    head      = document.getElementsByTagName('head')[0];

scr.onload = scr.onreadystatechange = function(){
        if( scr.readyState ){
            if(scr.readyState === 'complete' || scr.readyState === 'loaded'){
                scr.onreadystatechange = null;                                                  
                myReadyFunc();
            }
        } 
        else{                               
                myReadyFunc();          
        }
};  

head.insertBefore(scr, head.firstChild);

function myReadyFunc() {
    $(document).ready(function() {
      // something that uses jquery and currently doesn't work
    });
}

Answer 2

您可以处理<script>元素的onreadystatechange事件，如果this.readyState是complete或loaded，则运行您的功能。
对于Firefox，请处理onload事件。

你可以在一个包装函数中公开它，它将一个函数作为参数，并在加载jQuery时调用它，或者如果它没有被加载则将它放在一个数组中（在加载处理程序中调用）。

Answer 3

老派答案:) 您可以创建一个递归轮询函数来检查$对象是否存在，例如：

function poller(){
    if($.length != 0){
       //do what you want

    }else{
       setTimeout(poller, 100);
    }    
}

加载jQuery脚本后立即运行poller函数。

当jQuery作为动态附加的<script> </script>加载时，$（document）.ready（）

3 个答案: