Document ready function javascript

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

version added: 1.0 .ready( handler )

handler

Тип: Функция

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

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

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

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

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

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

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

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

Пример

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

В JS, манипуляции с тегами рекомендуется выполнять после полной загрузки DOM-дерева. Для этого есть события DOMContentLoaded и onload, в jQuery функция ready, рассмотрим их применение.

jQuery document ready

Сработает как только браузер полностью загрузит HTML и построит DOM-дерево.

Сокращенный аналог

DOMContentLoaded

Тоже самое что и document.ready .

window.onload

В отличии от DOMContentLoaded и ready , событие onload срабатывает после полной загрузки всех ресурсов (например, изображения).

Вариант на jQuery

Также событие можно задать атрибутом onload у тега .

С элементами страницы нельзя манипулировать до тех пор, пока документ не «готов». Библиотека jQuery позволяет определить это состояние готовности.

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

Код заключенный в $( window ).load(function() < . >) вызывается только в том случае, когда агент пользователя завершит загрузку всего содержимого документа, включая фреймы, объекты, изображения и т.д. В случае привязки к элементу, эта функция вызывается когда целевой элемент и все его содержимое полностью загружено.

$( window ).load(function() < . >) будет работать только в том случае, если Вы настроили её перед тем, как элемент был полностью загружен, иначе, ничего не произойдет. Подобного не происходит в $(document).ready() .

Оцените статью
Много толка
Добавить комментарий