Проверьте, загружен ли jquery без использования события готовности документа - PullRequest
7 голосов
/ 07 января 2011

На моем сайте есть функция 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 в каждую страницу - это издержки в 23 КБ, которых я бы хотел избежать. Как я могу проверить, был ли загружен jquery, и только исключительная функция initPage (), когда был загружен jquery?

Edit: Чтобы быть более точным, мне нужно многократно проверять, загружен ли 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);
                });
            });
       }

Ответы [ 6 ]

5 голосов
/ 07 января 2011

Я думаю, вы могли бы просто использовать

if (jQuery) {
   ...
}

чтобы увидеть, существует ли объект jQuery.

Хорошо, лучше было бы:

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

или

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

EDIT:

Не беспокойтесь о накладных расходах или о том, загружен ли объект jQuery. Если вы просто включите библиотеку jQuery с помощью обычного тега <script src="...">, а затем выполните свой код без $(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>

Однако я не думаю, что это было бы необходимо в большинстве ситуаций.

1 голос
/ 07 января 2011

Пока вы размещаете тег script, который включает в себя jQuery, над тегом script, который выполняет вашу функцию, он должен работать нормально.

Обертывание вашего сценария вместо функции готовности может помочь:

(function() {
    // Your code here
})();
0 голосов
/ 20 января 2014

Я использовал footable плагин jquery. Это сработало для меня:

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

jquery версия - 1.9.1 загружаемая версия - 0.5

0 голосов
/ 07 января 2011

Что мне не нравится в приведенном выше вызове, так это то, что jsonp действительно может быть запущен до события готовности документа

Вы уверены в этом ?!обратите внимание, что вы все еще можете загружать изображения ... и т. д.
Я думаю, вам нужно использовать:

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

Ссылка

0 голосов
/ 07 января 2011

Привет, я думаю, вы должны сначала проверить, является ли jquery и определен ли метод, который вы собираетесь использовать

if (typeof (jQuery)! = 'Undefined' && typeof ($.ajax)! = 'undefined') {
// ваш код появится здесь
}

0 голосов
/ 07 января 2011

Вы можете добавить либо функцию завершения загрузки, либо функцию завершения сетки, как показано ниже, что поможет вам выполнить некоторые операции с jqgrid

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