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

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 已经加载完成，以便我可以使用它呢？

- Shomrat Shomrat

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。尽管我不确定您是否想要使用另一个库来协助加载主要库。

- jfriend00

---

他也可以尝试使用这里的现成懒加载器之一：http://microjs.com/#loader。 - Tim Dumol

谢谢。我正在寻找您上面提到的解决方案（第一个链接）。 - Shomrat Shomrat

@TimDumol - 好主意 - 我已经采纳了那个建议。 - jfriend00

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";

- Engineer

---

这在一些浏览器中可以工作，但在旧版本的IE中无法工作。 - jfriend00

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.
});

- Jon Jaques

---

哈哈，当然我太晚了，工程师已经抢先一步了。script.onload是关键。 - Jon Jaques

在一些较旧版本的IE中，script.onload无法正常工作。 - jfriend00

呃...好的，更新我的代码片段。 - Jon Jaques

为什么要在循环中重新加载jQuery？你的代码本质上就是这样做的。如果jQuery没有加载，就加载jQuery。如果onload触发且jQuery未加载，则再次加载jQuery，反复重复。 - jfriend00

我从我的书签片段中找到了这个。如果页面上已经有jQuery，那么它真的很有用。我应该修补它，以免尝试创建脚本超过一次。 - Jon Jaques

Answer 4

你可以放置代码

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

这里是文档：http://api.jquery.com/ready/

编辑： 我猜我理解错了问题。 所以我无法回答如何查看它是否已加载，但可以提供另一种加载库的方法。

    <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>

这里会加载一个本地版本的jQuery，如果Google API不可用的话。然后上面的代码片段应该足够安全，知道jQuery已经被加载。

- madc

---

如果尚未加载jQuery，则无法使用document.ready()。这对于OP关于动态加载jQuery的问题没有帮助。 - jfriend00