Каковы подводные камни выполнения jQuery без $ (document) .ready () ;?

Question

Понятно, я надеюсь.

Answer 1

Ваши селекторы jQuery будут случайным образом пропускать любые элементы, потому что они еще не загружены (браузером).

Answer 2

$ (document) .ready () - это способ jQuery убедиться, что код, который вы хотите запустить при загрузке страницы, выполняется одновременно во всех браузерах.

Он также предоставляет механизм для стека различных функций, запускаемых при загрузке страницы. Если вы не используете его и у вас есть несколько назначений onLoad, будет выполняться только последнее добавленное.

Answer 3

Это первое, что нужно узнать о jQuery: если вы хотите, чтобы событие работало на вашей странице, вы должны вызывать его внутри функции $ (document) .ready (). Все внутри него будет загружаться, как только DOM загружен и до загрузки содержимого страницы.

 $(document).ready(function() {
   // put all your jQuery goodness in here.
 });

Функция $ (document) .ready () имеет массу преимуществ по сравнению с другими способами заставить события работать. Прежде всего, вам не нужно помещать какую-либо «поведенческую» разметку в HTML. Вы можете разделить все ваши JavaScript / jQuery в отдельный файл, где его легче поддерживать и где он может быть недоступен контенту. Мне никогда не нравилось видеть все эти сообщения «javascript: void ()» в строке состояния, когда я наводил курсор на ссылку. Вот что происходит, когда вы прикрепляете событие непосредственно внутри тега.

На некоторых страницах, использующих традиционный JavaScript, в теге вы увидите атрибут «onload». Проблема в том, что он ограничен только одной функцией. О да, и это снова добавляет «поведенческую» разметку к контенту. Отличная книга Джереми Кейта, DOM Scripting, показала мне, как создать функцию addLoadEvent для отдельного файла JavaScript, который позволяет загружать в него несколько функций. Но это требует достаточного количества кода для чего-то, что должно быть довольно простым. Кроме того, это вызывает те события, когда окно загружается, что приводит меня к другому преимуществу $ (document) .ready ().

С $ (document) .ready () вы можете получить ваши события для загрузки или запуска или что вы хотите, чтобы они делали до загрузки окна. Все, что вы вставляете в скобки, готово к работе в самое ближайшее время - как только DOM будет зарегистрирован браузером, что позволяет легко скрывать и показывать эффекты и другие вещи сразу, когда пользователь впервые видит элементы страницы.

Ссылка от http://docs.jquery.com/Tutorials:Introducing_$(document).ready()

Answer 4

Существует две основные причины использования

$(document).ready (function ()) // or $(function ())

1) Это гарантирует, что код внутри будет запущен только после полной загрузки DOM (это не включает загрузку изображений, flash или других ресурсов, только DOM, созданный из HTML). Это означает, что вы можете поместить javascript в любое место HTML-кода, а не внизу (который с помощью vanilla javascript - единственное место, где вы можете разместить его, чтобы гарантировать, что он будет работать на всем DOM вместо того, что загружено в данный момент). Если вы не используете событие window.onload, которое также гарантирует это, но может использоваться только один раз. Что подводит меня ко второму пункту;

2) Это позволяет вам запускать несколько функций при загрузке страницы, а не одноразовое использование window.onload, которое вы используете при использовании vanilla javascript. Это здорово, потому что это означает, что вам не нужно: а) писать свою собственную функцию, чтобы позаботиться об этом, б) беспокоиться о проверке, чтобы увидеть, есть ли уже функция загрузки из другой библиотеки, в) тратить то, что похоже на годы отладки только чтобы узнать, что ваш window.onload был перезаписан чужим кодом.

Бонусный балл: 3) Выглядит круто, нет? : P

Другие примечания: если вы не используете DOM или не манипулируете им, ваш код не обязательно должен находиться внутри функции $ (document) .ready ().

Помещение ваших файлов javascript в конец HTML, непосредственно перед тем, как даст ощутимое увеличение скорости загрузки - на самом деле это не быстрее, но браузер загрузит JS после HTML, поэтому можно начать рендеринг HTML во время загрузки JS. Это, в свою очередь, означает, что что-то появится на экране пользователя на долю секунды раньше, чем сценарий в - а в Интернете счетчик разделенных секунд:)

Answer 5

В основном используйте это основное правило:

если ваш код использует DOM, оберните ваш код в $ (document) .ready (). Если это не связано с DOM, не заключайте его в $ (document) .ready ()

Answer 6

Когда вы выбираете элементы в DOM, они иногда будут работать, а иногда не будут работать.

Это зависит только от того, загружены они или нет.

Однако, если вы добавите скрипт в самом конце документа, все будет в порядке. (С того момента он должен был загрузить все).

Answer 7

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

Answer 8

Будет непредсказуемо, когда скрипт будет запускаться из браузера в браузер, со страницы на страницу.