Обработчик готовности дерева DOM

.ready()

Устанавливает обработчик готовности дерева DOM.

.ready(handler(eventObject)):jQueryv:1.0

handler(eventObject) — функция, которая будет установлена в качестве обработчика. При вызове она будет получать объект события eventObject.

С помощью стандартных средств javascript, вы можете обработать событие готовности страницы — onload. Однако, оно будет вызвано только после того, как будет сформирована абсолютно вся страница, в том числе, когда будут загружены все картинки и другие мультимедийные элементы. В то время как событие ready происходит в момент готовности дерева DOM, что происходит раньше начала загрузки "тяжелых" мультимедийных файлов. Это оптимальный момент, когда можно приступить к установке обработчиков различных событий и выполнять другой подготовительный javascript-код.

Замечание: конечно, если подготовительные действия требуют наличия таких элементов как картинки, правильным будет полагаться на событие load. Однако, имейте ввиду, что одновременное использование .ready() и <body onload="..."> приведет к ошибке. Если вам необходимо использовать оба события, используйте метод библиотеки jQuery .load(), вместо <body onload="...">.

Замечание 2: если метод .ready(handler) будет вызван после того, как DOM был сформирован, то заданный обработчик этого события handler, будет сразу же выполнен. Однако, это не сработает в случае $(document).bind("ready", handler). В этом случае handler не будет вызван совсем.

Примеры использования

Простой пример:

$(document).ready(function(){
  alert('Структура страницы сформирована, можно приступать!');
});


Пример посущественнее. После готовности DOM выведем соответствующий текст в параграф:

<!DOCTYPE html>
<html>
<head>
  <style>p{color:red}</style>
  <script src="//code.jquery.com/jquery-latest.min.js"></script>
  <script>
    $(document).ready(InitPage);
    function InitPage(){
      $("p").text("Структура документа загружена и полностью сформирована, пора действовать!");
    }
  </script>
</head>
<body>
  <p>Страница еще не готова</p>
</body>
</html>

Ссылки

Поисковые ключи:
  • готовность дерева DOM
  • обработчик события ready
  • .ready()
  • ready()