测试jQuery是否加载，而不使用文档准备就绪事件

Question

我网站上有一个jQuery函数，它在页面加载时从另一个（安全的）服务器检索数据。使用jsonp调用，我目前在document ready事件之后加载此数据：

<script type="text/javascript">
    $(document).ready(function () {
       $.getJSON(_secureHost + '/base/members/current.aspx?callback=?', function (data) {
            initPage(data);
        });
    });
</script>

我不喜欢上述调用的一点是，jsonp实际上可能会在文档就绪事件之前执行，从而拖慢页面加载速度。因此，如果我在页面中包含jquery（即不使用脚本标记引用），则以下代码可以很好地工作，并且页面加载速度更快：

<script type="text/javascript">
    $.getJSON(_secureHost + '/base/members/current.aspx?callback=?', function (data) {
        $(document).ready(function () {
            initPage(data);
        });
    });
</script>

但是在每个页面中包含jquery会增加23k的开销，我想避免这种情况。如何测试是否已加载jquery并仅在加载jquery时执行initPage()函数？

编辑： 为了更精确，我需要重复检查jquery是否已加载，然后再执行事件。定时器可能是解决方案。

解决方案： 我创建了一个预初始化程序来检查jquery。我的页面加载速度非常快：）感谢大家！

   function preInit() 
   {
       // wait until jquery is loeaded
       if (!(typeof jQuery === 'function')) {
           window.setTimeout(function () {
               //console.log(count++);
               preInit();
           }, 10);  // Try again every 10 ms..
           return;
       }
           $.getJSON(_secureHost + '/base/members/current.aspx?callback=?',
            function (data) {
                $(document).ready(function () {
                    initPage(data);
                });
            });
       }

- AyKarsi

Answer 1

我认为你可以直接使用。

if (jQuery) {
   ...
}

检查jQuery对象是否存在。

更好的写法是:

if (typeof jQuery !== 'undefined') {
   ...
}

或者

if (typeof jQuery === 'function') {
   ...
}

编辑：

不用担心额外开销或jQuery对象是否已加载。只需使用常规的<script src="...">标签包含jQuery库，然后执行您的代码而不使用$(document).ready，像这样：

<script type="text/javascript">
   $.getJSON(_secureHost + '/base/members/current.aspx?callback=?', function (data) {
        initPage(data);
    });
</script>

这会起作用。 $(document).ready 部分只是为了确保在您尝试更改尚未加载的DOM元素之前，DOM已完全加载。jQuery库本身，包括Ajax功能，将立即存在。

现在，如果您的 initPage(data) 调用使用了DOM，我假设它确实如此，您可以在其中放置一个检查，例如：

<script type="text/javascript">
    function initPage(data) {
        var $domObject = $('#your-dom-object');
        if ($domObject.length === 0) { // Dom object not loaded yet.
            window.setTimeout(function() {
                initPage(data);
            }, 0); // Try again after other stuff has finished.
            return;
        }
        // Do your regular stuff here.
    }
</script>

然而，在大多数情况下，我认为这并不是必要的。

- Spiny Norman

---

这差不多就是了。但我不知道加载jQuery需要多长时间。我得重复检查，直到jQuery被加载。我可以创建一个每10毫秒检查一次的计时器。但那感觉不太好。 - AyKarsi

啊，你是这个意思啊？我以为你是想测试 jQuery 是否已经加载。如果是这样的话，我相信在退出 <script src="jquery.js"> 标签时，jQuery 已经完成了加载。所以，只需删除围绕 $.getJSON 调用的 $(document).ready(function () { ... }); 即可解决问题。 - Spiny Norman

给你。我认为这更符合你的需求，尽管我仍然认为yagni。 - Spiny Norman

Answer 2

只要您将包含jQuery的脚本标签放在运行函数的脚本标签之上，它就应该可以正常工作。

使用以下代码而不是ready函数来包装您的脚本可能会有所帮助：

(function() {
    // Your code here
})();

- Olical

---

这与$(document).ready(function(){})完全相同，只是一种简写版本。 - Matt Asbury

我使用它来在文档加载时运行函数，而无需包含jQuery。我不知道jQuery会改变这个功能？ - Olical

@Matt 那应该是 $(function() {...}); :) @Wolfy87 这是一种很好的封装代码的方式，但它并没有改变太多。不过，我认为我们的海报不需要太多的改变。 - Spiny Norman

жИСиЃ§дЄЇMattжККеЃГиѓѓиЃ§дЄЇжШѓ$(function() { //code });пЉМињЩжШѓjQueryдЄ≠document.readyзЪДзЃАеЖЩ嚥еЉПгАВ - Sondre

@Spiny Norman 很好的观点，我认为它可以独立运行，我不确定它是否需要/任何/封装。 - Olical

抱歉，看来我应该更仔细地检查。+1 - Matt Asbury

Answer 3

你可以像下面所示添加load complete函数或grid complete函数，这将帮助你在jqgrid上执行一些操作。

 height : '550',
    width : '787',
    loadComplete : function() {}
    gridComplete:function(){}

- RPB

Answer 4

我不喜欢上面的调用方式，因为在文档就绪事件之前 jsonp 可能已经被执行了。

你确定吗？请注意，你可能仍然有图片加载等等。

我猜你需要使用：

$(window).load(function() {
    $.getJSON(_secureHost + '/base/members/current.aspx?callback=?', function (data) {
        initPage(data);
    });
});  

链接

- ifaour

---

我实际上希望尽早执行jsonp。文档准备就绪意味着DOM已准备好进行操作。只要在开始操作之前遵守文档准备就绪，就没问题了。 - AyKarsi

Answer 5

嗨，我认为您应该首先检查jQuery和您要使用的方法是否已定义

如果(typeof(jQuery)!='undefined' && typeof($.ajax)!='undefined' ){
// 您的代码将在此处编写
}

- Hafiz

Answer 6

我正在使用footable jQuery插件。这对我有用：

if ( $.fn.footable) 
{...}

jQuery版本 - 1.9.1 Footable版本 - 0.5

- Binita Bharati