Обработчик готовности дерева DOM
Устанавливает обработчик готовности дерева DOM.
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="https://code.jquery.com/jquery-latest.min.js"></script> <script> $(document).ready(InitPage); function InitPage(){ $("p").text("Структура документа загружена и полностью сформирована, пора действовать!"); } </script> </head> <body> <p>Страница еще не готова</p> </body> </html>