测试是否未使用文档就绪事件加载 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 是否已加载，然后执行事件。计时器作业可能是解决方案..

解决方案： 我创建了一个执行 jquery 检查的 preinit。我的页面加载速度再快不过了:)。谢谢大家！

   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) 调用使用了 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>

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

Answer 2

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

将您的脚本包装在 this 而不是 ready 函数中可能会有所帮助：

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

Answer 3

您可以添加加载完成功能或网格完成功能，如下所示，这将帮助您对jqgrid进行一些操作

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

Answer 4

您好，我认为您应该首先检查是否是 jquery，以及您要使用的方法是否已定义

if(typeof(jQuery)!='undefined' && typeof($.ajax)!='undefined'){
// 你的代码会在这里
}

Answer 5

我不喜欢上述内容 调用，是jsonp实际上可以 在文档准备好之前执行 事件

你确定吗？！请注意，您可能仍有图像加载..etc
我猜你需要使用：

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

Link

Answer 6

我使用的是footable jquery 插件。这对我有用：

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

jquery 版本 - 1.9.1 适合版本 - 0.5