На этом шаге мы рассмотрим особенности использования различных обработчиков, вызываемых в момент запуска программного кода.
Ранее отмечалось, что обработчик $(document).ready() в библиотеке jQuery может использоваться для тех же целей, что и обработчик onload, встроенный в JavaScript. Несмотря на то что эти обработчики имеют похожее действие, они запускаются в едва различимые моменты времени.
Событие window.onload возникает тогда, когда документ полностью загружен браузером, то есть когда все элементы страницы доступны для выполнения операций над ними из программного кода JavaScript, что позволяет писать полноценный программный код, не волнуясь об очередности загрузки.
С другой стороны, обработчик, регистрируемый с помощью $(document).ready(), вызывается тогда, когда дерево DOM полностью готово к использованию, то есть когда все элементы дерева доступны сценарию, но при этом, возможно, не все ассоциированные со страницей файлы загружены. Программный код может быть запущен, как только разметка HTML будет загружена и преобразована в дерево DOM.
Примечание. Чтобы обеспечить применение стилей оформления до запуска программного кода JavaScript лучше всего поместить теги <link rel="stylesheet"> перед тегами <script> внутри элемента <head> документа.
В качестве примера рассмотрим страницу, представляющую галерею изображений. Такая страница может содержать массу изображений, которые с помощью библиотеки jQuery мы можем скрывать, отображать, перемещать и так далее. Если выполнить настройку интерфейса по событию onload, пользователь вынужден будет ожидать, пока загрузятся все изображения, и только после этого у него появится возможность взаимодействовать со страницей. Хуже того, если реализация поведения еще не подключена к элементам, предусматривающим некоторую реакцию по умолчанию (например, ссылкам), то действия пользователя могут привести к не продуманным заранее результатам. В случае реализации настройки интерфейса с помощью $(document).ready() интерфейс окажется готовым к использованию намного раньше и будет иметь корректное поведение.
Примечание. Использование обработчика $(document).ready() практически всегда предпочтительнее, чем использование onload, но не следует забывать, что поскольку к моменту вызова обработчика $(document).ready() некоторые файлы могут быть еще не загружены, такие атрибуты, как высота и ширина изображений, не всегда могут быть доступны к этому моменту времени. Если подобные атрибуты необходимы программному коду, то имеет смысл реализовать обработчик onload (или даже лучше воспользоваться jQuery для установки обработчика события load). Оба механизма могут прекрасно сосуществовать друг с другом.
На следующем шаге мы рассмотрим размещение множества сценариев в одной странице.
