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

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

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

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

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

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

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

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

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

Этот код можно еще сократить.

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

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

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

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

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

При выполнении этого примера будет иметь место следующая последовательность событий.

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

Как видно из примера, событие onload возникает самым последним, а методы ready() и функция $() выполняются в порядке объявления в программе.

Самоучитель по jQuery
Самоучитель по jQuery Учебник по jQuery 3.5.1 и AJAX в формате PDF

Помощь сайту

Yandex-деньги: 410011140483022

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

Поиск по сайту в Яндексе