Уроки JavaScript – выполнение кода после полной загрузки DOM

Довольно часто при написании кода JavaScript вам нужно проверять, что DOM полностью загружен. Это делается для того, чтобы быть уверенным, что все элементы DOM доступны, и вы можете получить доступ к этим элементам и уже можете ими манипулировать.

Всякий раз, когда вы используете JavaScript для манипулирования вашей страницей, вам нужно дождаться события готовности документа. Событие готовности документа сигнализирует о загрузке DOM страницы, после которого вы уже можете манипулировать им. Обратите внимание, что событие готовности документа (ready) запускается ДО загрузки всех картинок и других медиа-данных, но после полной готовности DOM.

В сегодняшней статье мы рассмотрим основные способы проверки загрузки DOM с помощью библиотеки jQuery, а также с помощью простого JavaScript.

Способы проверки загрузки DOM в jQuery

Библиотека jQuery располагает двумя методами для проверки загрузки DOM, выполнения кода и прикрепления обработчиков событий: $(document).ready и $(window).load.

Эти функции проверки загрузки DOM, которые используются в jQuery (также называются jQuery DOM Ready), имеют различные виды написания.

В основном, когда вы вызываете функцию jQuery, вы передаете ее объекту документа (document). Функция возвращает расширенную версию объекта документа. Этот расширенный объект имеет функцию ready(), в которую вы передаете функцию(и) JavaScript. После готовности DOM, эти функции JavaScript будут выполнены.

Ниже мы рассмотрим примеры использования самовыполняющихся функций, которые срабатывают после загрузки элементов страницы.

Вариант №1.

$(document).ready(function() {
  //здесь выполняем jQuery код, когда загружен DOM
});

Вариант №2.

$(function() {
  //здесь jQuery код
});

Эта функция похожа на вариант №1 и выполняет буквально одно и то же.

Вариант №3.

jQuery(document).ready(function($) {
  // здесь выполняем jQuery код, когда загружен DOM
});

Использование этого варианта помогает предотвратить конфликты с другими JavaScript платформами. Конфликты могут возникать вследствие того, что многие JavaScript библиотеки/фреймворки используют одно и то же ключевое слово — $ (символ доллара). Использование одинаково именованных функций обескураживает браузер.

Способом предотвращения подобных конфликтов можно назвать использование псевдонима для пространства имен (в примере выше это jQuery). Также можно использовать функцию $.noConflict(). Ниже 2 примера такого использования.

jQuery.noConflict(); // возвращаем переменную $ другим JavaScript библиотекам
jQuery(document).ready( function(){
  // здесь выполняем jQuery код, когда загружен DOM, и без конфликтов
});
// второй вариант – используя способ самореализации функции
jQuery.noConflict();
(function($) {
  // код, в котором используется алиас $ для jQuery
})(jQuery);

Вариант №4.

(function($) {
  // код, в котором используется алиас $ для jQuery
  $(function() {
    // другой код, в котором используется алиас $ для jQuery
  });
})(jQuery);
// дальше идет другой код, в котором используется алиас $ для других библиотек

Этот способ также поможет вам предотвратить конфликты с другими библиотеками JavaScript.

Вариант №5.

Иногда вам нужно манипулировать картинками с помощью JavaScript, но, напомним, что $(document).ready() не позволяет это делать, поскольку функция ждет загрузки DOM, но не других ресурсов. В этом случае вам нужно использовать другую инициализацию jQuery. Ниже пример такого кода:

$(window).load(function(){
  // инициализация после того, как загрузились изображения на странице
  // теперь страница полностью загружена, включая все фреймы, объекты и картинки
});

Событие ready запускается, когда DOM полностью загружен, а событие load запускается после загрузки не только DOM, но и всех ресурсов.

Вы также можете использовать событие загрузки документа следующим образом:

$(window).on("load", function(){
  // инициализация после того, как страница полностью загрузилась (включая все фреймы, объекты и картинки)
});

jQuery позволяет зарегистрировать несколько слушателей готовности (ready) документов. Просто вызовите $(document).ready() необходимое количество раз (в основном так и делается, если на странице загружается несколько файлов скриптов). Код этих скриптов выполняется в том порядке, в котором они были загружены.

Использование простого JavaScript

Если вы не используете в своих скриптах библиотеки или фреймворки (например, jQuery), вы можете использовать простой JavaScript. Эта имплементация работает приблизительно в 98% браузеров (все современные браузеры и IE9+):

document.addEventListener("DOMContentLoaded", function(event){
  // добавляем обработчик, когда DOM полностью загружен
  // здесь код
});

Для более старых браузеров вы можете использовать следующий подход: если вы поместите скрипт в конец страницы (он будет последним тегом script перед закрывающим тегом <body>), DOM будет готов и его статус readyState изменится на complete. После этого статуса вы можете выполнять код. Ниже пример такой реализации:

document.onreadystatechange = function() {
  if (document.readyState == "complete") {
    // документ полностью готов, можем выполнять JavaScript код
  }
}

Краткий итог

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

Если вам нужно выполнять код после загрузки DOM и вы используете jQuery в своем проекте, вы можете использовать функции ready документа или load объекта окна.

Если вам нужен простой JavaScript, тогда используйте событие DOMContentLoaded.

Теги: JavaScript