Уроки 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.

 

Recent Posts

Уильям Шекспир

Грехи других судить вы так усердно рветесь, начните со своих и до чужих не доберетесь… Read More

18/04/2021

Что подарить друзьям на годовщину свадьбы

Люди, между которыми есть любовь и взаимопонимание, скрепляют отношения и зарождают новый союз, а дату… Read More

13/04/2021

Авторитетность домена и его влияние на SEO продвижение сайта

Для качественного SEO (поисковой оптимизации, раскрутки сайта) одним из важных показателей является Авторитет домена (Domain… Read More

27/03/2021

Как вывести деньги из PayPal – основные способы

Выяснение того, как вывести свои деньги с PayPal, является одним из первых вопросов, которыми озадачивается… Read More

26/03/2021

Как выбрать юбку под свою фигуру на LeBoutique

Юбка – мощный элемент женского гардероба, благодаря которому любой наряд будет выглядеть потрясающе стильно и… Read More

25/03/2021

Основные методы линкбилдинга: как получить качественные внешние ссылки на сайт

Поисковые системы (например, Google) проверяют технические характеристики вашего сайта, такие как скорость загрузки, удобство навигации,… Read More

24/03/2021