测试是否未使用文档就绪事件加载了jQuery [英] Test if jquery is loaded not using the document ready event

问题描述

在我的站点上，我有一个jquery函数，该函数会在页面加载后立即从另一台(安全的)服务器中检索数据.我目前使用jsonp调用在文档就绪事件后加载此数据:

On my site I have a jquery function which retrieves data from another (secured) server as soon as the page is loaded. Using a jsonp call I currently load this data after document ready event:

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

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

What I don't like about the above call, is that the jsonp can actually be exectued before the document ready event, thereby slowing down the page load. So if I include jquery inside the page (i.e. not referencing using the script tag), then the following code works great and the page loads faster:

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

但是在每个页面中都包含jquery是我要避免的23k开销.我如何测试以查看是否已加载jquery并在加载jquery时仅执行initPage()函数?

But including jquery in every page is a 23k overhead which I'd like to avoid. How can I test to see if jquery has been loaded and only the excecute the initPage() function when jquery has been loaded?

为了更精确，我需要反复检查是否加载了jquery，然后执行该事件.计时器作业可能是解决方案.

To be more precise I need check repeatedly if jquery is loaded and then exectue the event. A timer job could be the solution..

解决方案: 我创建了一个preinit来进行jquery检查.我的页面加载再快不过了:).感谢大家！

Solution: I've created a preinit which does the jquery check. My page loading couldn't be faster:). Thanks everyone!

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

推荐答案

我认为您可以使用

if (jQuery) {
   ...
}

查看jQuery对象是否存在.

to see if the jQuery object exists.

好的，最好是:

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

或

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

不必担心开销或jQuery对象是否已加载.如果仅使用常规<script src="...">标记包含jQuery库，然后在不使用$(document).ready的情况下执行代码，如下所示:

Don't worry about the overhead or whether the jQuery object is loaded. If you just include the jQuery library using a regular <script src="..."> tag and then execute your code without the $(document).ready, like this:

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

它将起作用. $(document).ready部分仅用于确保在尝试更改尚未加载的DOM元素之前已完全加载DOM.包括Ajax功能在内的jQuery库本身将立即出现.

It will work. The $(document).ready part is only to ensure the DOM has fully loaded before you go around trying to change DOM elements that aren't loaded yet. The jQuery library itself, including the Ajax functionality, will be there right away.

现在，如果您的initPage(data)调用使用的是DOM(我认为确实如此)，则您可以进行检查，如下所示:

Now, if your initPage(data) call uses the DOM, which I assume it does, you could put a check in that, like this:

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

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

However, I don't think this would be necessary in most situations.

这篇关于测试是否未使用文档就绪事件加载了jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！