.ready( handler )

Выполняет функцию, как только DOM полностью загрузился.

  • version added: 1.0.ready( handler )

    handler

    Тип: Функция

    Функцию, которая запустится после того, как DOM полностью загрузился.

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

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

Данные 3 записи эквивалентны:

$(document).ready(handler)
$().ready(handler) (не рекомендуется)
$(handler)

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

Обычно в метод .ready() передают анонимную функцию:

$(document).ready(function() {
    // Обработчик для .ready()
});

Эквивалент:

$(function() {
    // Обработчик для .ready()
});

Алиас на пространство имён jQuery

Если вы используете одновременно какую-то другую JavaScript библиотеку, то вызовите метод $.noConflict() для избежании коллизий. На самом деле $ является сокращением для слова jQuery. Однако, метод .ready() принимает аргумент, где мы можем указать этот знак. Это значит, что мы можем сами переименовать объект:

jQuery(document).ready(function($) {
 // код с префиксом $
});

Пример

Отобразить сообщение после готовности DOM-а.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ready demo</title>
  <style>p { color:red; }	</style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script>
  $(document).ready(function () {
  $("p").text("The DOM is now loaded and can be manipulated.");
});
  </script>

</head>
<body>
  <p>Not loaded yet.</p>

</body>
</html>

Демо:

^ Наверх ^