Question

在某些情况下，我需要使用像这样的javascript加载jQuery：

 <script type="text/javascript">
    if (typeof jQuery == 'undefined') 
    {
    var script = document.createElement('script');
    script.type = "text/javascript";
    script.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js";
    document.getElementsByTagName('head')[0].appendChild(script);
    }
 </script>

但我怎么知道JQuery已经完成加载以便我可以使用它。

Answer 1

您必须编写代码来检测加载动态加载脚本的时间，不幸的是，它在某些旧版浏览器中的工作方式略有不同，因此它并不是那么简单。这是一篇关于如何做到这一点的好参考文章：http://www.ejeliot.com/blog/109

以下是该文章的一些代码：

function loadScript(sScriptSrc, oCallback) {

    var oHead = document.getElementsByTagName('head')[0];
    var oScript = document.createElement('script');

    // make sure callback isn't run more than once
    function runCallback() {
        if (oCallback) {
            oCallback();
            oScript.onload = oScript.onreadystatechange = null;
            oCallback = null;
        }
    }

    oScript.type = 'text/javascript';
    // most browsers
    oScript.onload = runCallback;
    // IE 6 & 7
    oScript.onreadystatechange = function() {
        if (this.readyState === 'complete') {
            runCallback();
        }
    }
    oScript.src = sScriptSrc;
    oHead.appendChild(oScript);
}

或者，您可以使用其中一个为您工作的小库。您可以在此处查看其中一些列表：http://microjs.com/#loader。虽然我不确定您是否想要使用另一个库来协助加载您的主库。

Answer 2

尝试onload事件：

 //.....
 script.onload = function(){
     alert('jQuery is loaded succesfully').
 };
 script.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js";

Answer 3

感谢jfriend的回答。回调很性感。

第二次破解。

function loadJQ(callback) {
  if(!window.jQuery) {
    // Create jQuery script element.
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'path/to/jquery.js';
    document.body.appendChild(script);

    script.onload = function(){ callback(jQuery); };
    // IE 6 & 7 ala jfriend00
    script.onreadystatechange = function() {
      if (this.readyState == 'complete') callback(jQuery);
    }
  } else {
    callback(jQuery);
  }
}

调用

loadJQ(function($){
  alert($ === jQuery); // true. jquery is loaded.
});

Answer 4

您可以将代码放入

$(document).ready(function() {
   // Handler for .ready() called.
});

以下是文档：http://api.jquery.com/ready/

编辑：猜猜我错了。所以我无法回答如何看到它已加载，但可以提供另一种加载lib的方法。

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write("\x3Cscript src=\"path/to/js/jquery-1.7.1.min.js') }}\">\x3C/script>")</script>

这里，如果google api不可用，则会加载本地版本的jQuery。 ~~上面的snipped应该足够安全，知道jQuery已加载。~~

如何知道JQuery是否已完成加载

4 个答案: