Определение готовности документа

Обычно большинство действий производятся над элементами HTML-документа. По этой причине выполнять скрипты необходимо только после полной загрузки документа. Без библиотеки jQuery для этой цели обычно используется событие onload объекта window:

window.onload = function() {
   window.alert('Документ полностью загружен');
};

Однако это событие возникает только после полной загрузки самого HTML-документа, а также всех других элементов, например изображений. Загрузка изображений (или баннеров с другого сайта) может занимать определенное время, в течение которого выполнение скриптов как бы подвисает. Библиотека jQuery избавляет нас от потери времени и предоставляет возможность выполнения скриптов сразу после формирования структуры документа, не дожидаясь загрузки других элементов. Обработать это событие можно с помощью метода ready():

jQuery(document).ready( function() {
   window.alert('Документ доступен для выполнения скриптов');
});

Функция jQuery() имеет псевдоним $(). Используя этот псевдоним, можно обработать событие следующим образом:

$(document).ready( function() {
   window.alert('Документ доступен для выполнения скриптов');
});

Если в качестве параметра функции jQuery() указать ссылку на функцию, то она также будет выполнена сразу после формирования структуры документа:

jQuery(function() {
   window.alert('Документ доступен для выполнения скриптов');
});

Этот код можно еще сократить, причем этот синтаксис является предпочтительным в jQuery 3, чем использование метода ready():

$(function() {
   window.alert('Документ доступен для выполнения скриптов');
});

Необходимо также заметить, что в программе может быть несколько вызовов методов ready(). В этом случае выполнение методов происходит в порядке их объявления внутри программы.

Рассмотрим последовательность событий на примере. Для этого создадим HTML-документ и объявим несколько методов ready(), а также обработаем события DOMContentLoaded и onload (листинг 1.1).

Листинг 1.1. Последовательность обработки событий

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <title>Последовательность обработки событий</title>
   <script src="js/jquery.min.js"></script>
   <script>
      $(function() {
         console.log('Вызов функции $()');
      });
      $(document).ready(function() {
         console.log('Метод ready(). Вызов 1');
      });
      $(document).ready(function() {
         console.log('Метод ready(). Вызов 2');
      });
      document.addEventListener( "DOMContentLoaded", function() {
         console.log('Событие DOMContentLoaded');
      });
      window.onload = function() {
         console.log('Событие onload');
      };
   </script>
</head>
<body>
   <div>Пример последовательности обработки событий</div>
<script>
   console.log('Код в конце документа');
</script>
</body>
</html>

При использовании jQuery 3 будет иметь место следующая последовательность событий в результате выполнения примера:

Код в конце документа
Событие DOMContentLoaded
Событие onload
Вызов функции $()
Метод ready(). Вызов 1
Метод ready(). Вызов 2

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

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

Код в конце документа
Событие DOMContentLoaded
Вызов функции $()
Метод ready(). Вызов 1
Метод ready(). Вызов 2
Событие onload

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

Учебник по jQuery и AJAX
Учебник по jQuery и AJAX в формате PDF

Помощь сайту

ЮMoney (Yandex-деньги): 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов