Оглавление

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

Обычно большинство действий производится над элементами 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. Последовательность обработки событий

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

 

 

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

 
   Метод  ready().   Вызов   1

   Метод  ready().   Вызов  2

   Вызов  функции  $()

   Событие onload

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

 

 

 

 

<< Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити