Какое событие запускает функция JQuery $function()?

У нас есть инструкция JQuery $(function() как:

<script type="text/javascript">
$(function(){
  //Code..
})
</script>

Тупой вопрос - когда именно эта функция выполнена? Это когда вся HTML-страница была загружена клиентом?

В чем преимущество использования кода в $(function(), а не просто:

<script type="text/javascript">
//Code..
</script>

Ответы

Ответ 1

Выполняется, как только DOM анализируется и вызывается в порядке появления, если есть несколько явлений. На этом этапе документ, однако, не отображается, его просто анализируется.

Ответ 2

Он запускается, когда документ анализируется и готов, и является эквивалентом $(document).ready(function () { }).

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

Ответ 3

Когда документ завершит загрузку. Это то же самое, что и написать:

$(document).ready(function(){});

EDIT: ответьте на второй вопрос:

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

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

Ответ 4

Он запускается после того, как документ полностью загружен, дерево DOM было инициализировано, все стили CSS были применены и весь Javascript был выполнен. Он отличается от события load тем, что элементы (кроме CSS/JS), которые загружают их содержимое из других URL-адресов, например изображений или флеш файлов, не обязательно заканчивают загрузку в этот момент. Обычно это называется событием "domready" или "domloaded", а некоторые современные браузеры поддерживают его напрямую (например, Firefox имеет событие DomContentLoaded), а на других его можно моделировать с помощью различных трюков, например, с использованием атрибута defer или размещения a script в самом конце тела.

Преимущество заключается в том, что вы можете надежно взаимодействовать с документом в это время; например, вы можете установить обработчик события на элемент с определенным идентификатором и убедиться, что он уже существует в дереве DOM. С другой стороны, он может работать значительно раньше, чем событие загрузки, если некоторый внешний ресурс медленно загружается. Если ваш script находится в конце вашего HTML-кода, то может быть мало различий в использовании или не использовании события domready, но обычно скрипты вызывают из тега head, и в этот момент нет элементов тела еще доступны.