jquery - 测试 jquery 是否已加载而不使用文档就绪事件

Question

在我的网站上，我有一个 jquery 函数，一旦页面加载，它就会从另一个(安全的)服务器检索数据。使用 jsonp 调用，我当前在文档就绪事件后加载此数据:

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

我不喜欢上述调用的是，jsonp 实际上可以在文档就绪事件之前执行，从而减慢页面加载速度。因此，如果我在页面中包含 jquery(即不使用 script 标记进行引用)，那么以下代码效果很好并且页面加载速度更快:

<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 是否已加载，然后执行该事件。计时器工作可能是解决方案..

解决方案: 我创建了一个 preinit 来执行 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);
                });
            });
       }

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) call 使用 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>

但是，我认为在大多数情况下这没有必要。