7

在我的网站上，我有一个 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);
                });
            });
       }
4

6 回答 6

5

我想你可以使用

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>

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

于 2011-01-07T09:15:43.860 回答
1

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

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

(function() {
    // Your code here
})();
于 2011-01-07T09:16:44.237 回答
0

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

 height : '550',
    width : '787',
    loadComplete : function() {}
    gridComplete:function(){}
于 2011-01-07T09:21:37.113 回答
0

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

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

于 2011-01-07T09:26:20.510 回答
0

我不喜欢上述调用的是，jsonp 实际上可以在文档就绪事件之前执行

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

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

关联

于 2011-01-07T09:27:20.403 回答
0

我正在使用适合的 jquery 插件。这对我有用：

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

jquery 版本 - 1.9.1 适合版本 - 0.5

于 2014-01-20T14:23:02.033 回答