У меня есть веб-страница. Когда эта веб-страница загружается, я хочу выполнить некоторый JavaScript. Этот JavaScript использует JQuery. Однако, похоже, что при загрузке страницы библиотека jQuery не была полностью загружена. Из-за этого мой JavaScript не выполняется должным образом.
Каковы некоторые рекомендации по обеспечению загрузки вашей библиотеки jQuery перед выполнением JavaScript?
Библиотека 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>');
});
Уже есть несколько ответов, каждый из них отлично работает, но все они зависят от того, что jQuery загружается синхронно, прежде чем какие-либо зависимости попытаются его использовать. Этот подход очень безопасен, но также может показаться неэффективным, поскольку никакие другие ресурсы не могут быть загружены/запущены, а библиотека jQuery script загружается и анализируется. Если вы поместите jQuery в голову с помощью встроенного тега, браузер пользователей будет сидеть без дела во время загрузки и обработки jQuery, когда он может делать другие вещи, такие как загрузка изображений, загрузка других скриптов и т.д.
Если вы хотите быстро реагировать на запуск, каждая миллисекунда рассчитывает.
Огромная помощь мне за последний год или около того был Стив Соудерс, сначала, когда он был в Yahoo, а теперь в Google. Если у вас есть время, просмотрите его слайды для Даже более быстрые веб-сайты и Высокопроизводительные веб-сайты. Отлично. Для огромного перефразирования, продолжайте здесь.
При прикреплении файлов javascript к DOM было обнаружено, что установка встроенного <script> тег в <head> документа заставляет большинство браузеров блокироваться, пока этот файл загружается и анализируется. Исключение составляют 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. Но это может представлять проблему, если у вас есть script, который зависит от того, как jQuery заканчивает загрузку до того, как jQuery делает. jQuery не будет, и вы получите сообщение об ошибке: $или jQuery undefined.
Итак, чтобы убедиться, что ваш код будет запущен, вам нужно выполнить некоторую проверку зависимостей. Если ваши зависимости не выполняются, подождите немного и повторите попытку.
<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 файлов, вы можете прикрепить каждый из них с помощью этого метода. Вам просто нужно убедиться, что ваша функция проверки проверяет каждую зависимость перед запуском.
Могут быть две проблемы. Во-первых, вам нужно убедиться, что jQuery включен перед любыми скриптами, которые его используют. Это может быть сложно, если у вас есть javascript, встроенный в частичные. Если вы загружаете jQuery в заголовок и все остальные script в блок script в конце тела, вы можете быть уверены, что jQuery загружен перед другим кодом. Я пытаюсь поместить все в конец тела, когда jQuery является первым загруженным script.
Во-вторых, вы должны убедиться, что 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...
});
Когда браузер встречает элемент script, он блокирует, что означает, что до тех пор, пока у вас есть элемент script, который загружает jQuery перед любым script, который хочет использовать 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 для получения дополнительных комментариев по этой теме.
Поместите свой код после jquery и сделайте это
$(document).ready( { // your code } );
В общем, вы просто используете следующий базовый "загруженный документ" в jquery. Прямо из учебник jQuery для начинающих:
$(document).ready(function() {
// do stuff when DOM is ready
});
Я могу думать о какой-либо причине, почему это не должно работать, есть, конечно, миллионы сайтов, использующих jquery, которые полагаются именно на этот бит кода.