JavaScript - Как мне убедиться, что jQuery загружен? - PullRequest
Новая
       34

JavaScript - Как мне убедиться, что jQuery загружен?

20 голосов
/ 13 июля 2009

У меня есть веб-страница. Когда эта веб-страница загружена, я хочу выполнить JavaScript. Этот JavaScript использует JQuery. Однако, похоже, что при загрузке страницы библиотека jQuery была загружена не полностью. Из-за этого мой JavaScript не выполняется должным образом.

Каковы некоторые рекомендации для обеспечения загрузки вашей библиотеки jQuery перед выполнением JavaScript?

Ответы [ 6 ]

55 голосов
/ 14 июля 2009

Уже есть несколько ответов, каждый из них отлично работает, но все они зависят от того, чтобы убедиться, что jQuery загружен синхронно, прежде чем какие-либо зависимости пытаются его использовать. Этот подход очень безопасен, но он также может представлять неэффективность, поскольку никакие другие ресурсы не могут быть загружены / запущены во время загрузки и анализа скрипта библиотеки jQuery. Если вы поместите jQuery в голову с помощью встроенного тега, браузер пользователей будет бездействовать во время загрузки и обработки jQuery, когда он может выполнять другие действия, такие как загрузка изображений, загрузка других скриптов и т. Д.

Если вы ищете быстрое реагирование при запуске, каждая миллисекунда считается.

Большую помощь мне за последний год оказал Стив Соудерс, сначала когда он работал в Yahoo, а теперь в Google. Если у вас есть время, посмотрите его слайды для Даже более быстрых веб-сайтов и Высокопроизводительных веб-сайтов . Отлично. Для огромного перефразирования, продолжайте здесь.

При подключении файлов JavaScript к DOM было обнаружено, что размещение встроенного тега в документа приводит к блокировке большинства браузеров во время загрузки и анализа этого файла. IE8 и Chrome являются исключениями. Чтобы обойти это, вы можете создать элемент «script» через document.createElement, установить соответствующие атрибуты и затем прикрепить его к заголовку документа. Этот подход не блокирует ни в одном крупном браузере. 

<script type='text/javascript'>
    // Attaching jQuery the non-blocking way.
    var elmScript = document.createElement('script');
    elmScript .src = 'jQuery.js'; // change file to your jQuery library
    elmScript .type = 'text/javascript';        
    document.getElementsByTagName('head')[0].appendChild( elmScript );
</script>

Это гарантирует, что jQuery при загрузке и анализе не блокирует загрузку и анализ любых других изображений или файлов javascript. Но это может представлять проблему, если у вас есть скрипт, который зависит от того, jQuery заканчивает свою загрузку раньше, чем jQuery. jQuery не будет там, и вы получите сообщение о том, что $ или jQuery не определены.

Итак, чтобы убедиться, что ваш код будет работать, вы должны выполнить некоторую проверку зависимостей. Если ваши зависимости не соблюдены, подождите немного и попробуйте снова. 

<script type='text/javascript'>
runScript();

function runScript() {
    // Script that does something and depends on jQuery being there.
    if( window.$ ) {
        // do your action that depends on jQuery.
    } else {
        // wait 50 milliseconds and try again.
        window.setTimeout( runScript, 50 );
    }
}
</script>

Как я уже говорил ранее, с подходами, показанными ранее, проблем нет, все они действительны и все работают. Но этот метод гарантирует, что вы не блокируете загрузку других элементов на странице во время ожидания jQuery.

Этот подход будет работать для любого файла, поэтому, если вам нужно включить файлы 10 js, вы можете прикрепить каждый из них, используя этот метод. Вам просто нужно убедиться, что ваша функция проверки проверяет каждую зависимость перед запуском.

12 голосов
/ 13 июля 2009

Библиотека jQuery должна быть включена в <head> часть вашей страницы: 

<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>

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

Чтобы ваш код выполнялся после завершения загрузки DOM (поскольку вы не можете использовать большую часть библиотеки jQuery до тех пор, пока это не произойдет), сделайте следующее: 

$(function () {
    // Do stuff to the DOM
    $('body').append('<p>Hello World!</p>');
});

Если вы смешиваете фреймворки JavaScript, и они мешают друг другу, вам может понадобиться использовать jQuery следующим образом: 

jQuery(function ($) { // First argument is the jQuery object
    // Do stuff to the DOM
    $('body').append('<p>Hello World!</p>');
});
2 голосов
/ 13 июля 2009

Может быть две проблемы. Во-первых, вы должны убедиться, что jQuery включен, прежде чем использовать любые скрипты. Это может быть сложно, если у вас есть JavaScript, встроенный в частичные. Если вы загрузите jQuery в заголовок, а все остальные ваши скрипты - в блок скриптов в конце тела, вы можете быть уверены, что jQuery загружается перед вашим другим кодом. Я пытаюсь поместить все в конец тела, причем первым загруженным скриптом является jQuery.

Во-вторых, вы должны убедиться, что DOM полностью загружен, прежде чем пытаться использовать его в своих скриптах. jQuery предоставляет готовый метод для этого. Оберните ваш код в готовый метод, и вы можете быть (более) уверены, что DOM доступен для работы с вами. Не все изображения могут быть загружены, но вы должны быть в порядке с большинством всего остального. Для изображений вам, возможно, придется приложить больше усилий, чтобы убедиться, что они загружены, если это критично для вашего кода. 

<script type='text/javascript' src='.../path-to-jquery/jquery.js'></script>
$(document).ready( function() {
   ...your code here...
});

или (стенография) 

<script type='text/javascript' src='.../path-to-jquery/jquery.js'></script>
$(function() {
   ... your code here...
});
1 голос
/ 13 июля 2009

Когда браузер обнаруживает элемент script, он блокируется, что означает, что пока у вас есть элемент script, который загружает jQuery до любого сценария, который хочет использовать jQuery, у вас все должно быть в порядке, например, 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
    // jQuery is available

    $(document).ready(function(){
        // ...
    });
</script>

См. Порядок загрузки JavaScript для дополнительных комментариев по этой теме.

0 голосов
/ 13 июля 2009

В общем, вы просто используете следующий базовый тест «загружен документ» в jquery. Прямо из урока для начинающих jquery : 

 $(document).ready(function() {
   // do stuff when DOM is ready
 });

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

0 голосов
/ 13 июля 2009

Поместите свой код после jquery и сделайте это 

$(document).ready( { // your code } );
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...